Tema: Menu en css activo
Ver Mensaje Individual
  #6 (permalink)  
Antiguo 15/07/2012, 01:00
Avatar de memoadian
memoadian
Colaborador
  
Fecha de Ingreso: junio-2009
Ubicación: <?php echo 'México'?>
Mensajes: 3.696
Antigüedad: 15 años, 4 meses
Puntos: 641
Respuesta: Menu en css activo
Código HTML: 
Ver original
  1. <!DOCTYPE html>
  2. <head>
  3.     <title>Ejemplo funcional</title>
  4.     <style type="text/css">
  5.         ul{
  6.             list-style-type: none;
  7.         }
  8.         .top div{
  9.             display:none;
  10.             border:1px solid #666;
  11.             background-color: #DDD;
  12.             margin:20px;
  13.             padding:20px;
  14.         }
  15.         .top-button-current{
  16.             padding:5px;
  17.             background:#fe0000;
  18.             color:#fff;
  19.         }
  20.     </style>
  21.     <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
  22.     <script type="text/javascript">
  23.     $(document).ready(function(){
  24.         $('#tags').click(function(){
  25.             $('li').removeClass('top-button-current');
  26.             $(this).addClass('top-button-current');
  27.             $('.top > div').css('display', 'none');
  28.             $('.tags').css('display', 'block');
  29.         });
  30.         
  31.         $('#popular').click(function(){
  32.             $('li').removeClass('top-button-current');
  33.             $(this).addClass('top-button-current');
  34.             $('.top > div').css('display', 'none');
  35.             $('.posts-populares').css('display', 'block');
  36.         });
  37.         
  38.         $('#blog-archives').click(function(){
  39.             $('li').removeClass('top-button-current');
  40.             $(this).addClass('top-button-current');
  41.             $('.top > div').css('display', 'none');
  42.             $('.blog-archives').css('display', 'block');
  43.         });
  44.     });
  45.     </script>
  46. </head>
  47. <body>
  48.     <ul>
  49.         <li class="top-button-current" id="blog-archives">texto</li>
  50.         <li id="tags">texto</li>
  51.         <li id="popular">texto</li>
  52.         <div class="top">
  53.             <div class="tags">tags</div>
  54.             <div class="blog-archives">Blog archives</div>
  55.             <div class="posts-populares">Posts populares</div>
  56.         </div>
  57.     </ul>
  58. </body>

ejemplo completo