El Blog de Ayuda: Menú con Submenus

lunes, 2 de noviembre de 2015

Menú con Submenus

Un menú que tenga submenus es muy útil para poder organizar por tipos los enlaces de nuestra página, hoy voy a mostrarles un ejemplo muy sencillo usando pocos estilos Css y la librería Jquery Ejemplo :

<html>
 <head>
 <title>menu</title>
  <script src="js/jquery.min.js" type="text/javascript"></script>
 <style type="text/css">
  li{list-style:none;}
  
  .menu>li{
   text-align: center; 
   font-size: 21px;
   width: 200px; 
   background-color: #066abe;
   border-bottom: 1px solid white;
  }
 
  .menu li a{
  text-decoration:none;
  color:white;
   display:block; 
   padding: 8px; 
  }
  .menu li ul{
   padding-left: 0px; 
   display: none;}
   .menu li ul li{
   background-color: #555;
   }
 

 </style>
 </head>
 <body>
   <ul class="menu navegador" id="menu">
      <li><a class="desplegable" href="#">Inicio</a>
          <ul class="submenu">
              <li><a href="#">Sub menu 1</a></li>
          </ul> 
      </li>
      <li><a href="#" class="desplegable">Configuraciones</a>
          <ul class="submenu">
              <li><a href="#"> Submenu 2</a></li>
              <li><a href="#">Submenu 3</a></li>
          </ul> 
      </li>
      <li><a href="#" class="desplegable">Servicios</a>
          <ul class="submenu">
              <li><a href="#">Submenu 4</a></li>
              <li><a href="#">submenu 5</a></li>
              <li><a href="#">submenu 6</a> </li>
          </ul> 
      </li>
      </ul>
    
 </body>
 <script type="text/javascript">
 $('a.desplegable').click(function(){
      $(this).parent().find('ul.submenu').toggle(300);
  });
 </script>
</html>

El Blog de Ayuda

lunes, 2 de noviembre de 2015

Menú con Submenus

No hay comentarios.:

Publicar un comentario

Traducir