[HTML – CSS] Menu desplegable usando HTML y CSS

Para hacer un Menú desplegable, lo primero que se nos viene a la cabeza es, usar una solución basada en la combinación de HTML, CSS y Javascript, lo cual casi siempre nos resuelve nuestros problemas.

Sin embargo yo hace tiempo pensé en que tal vez se podría hacer sin tener que usar Javascript(Claro sin efectos :( ), y teniendo esto en mente me dispuse a buscar una solución para esto.

Y la encontré la solución, no recuerdo bien donde (Si logro encontrar el recurso podre el link), insisto no es mío este tip, pero me pareció útil compartirlo, y claro tiene una ventaja muy grande, la cual es, que es muy fácil de configurar y de usar.

Primero que nada necesitaremos una lista, la cual estará integrada así.

La lista principal será el menú, las listas de segundo nivel serán los submenus que estarán ocultos y puede contener hasta un tercer nivel, y se desplegaran de la siguiente forma, menú principal en horizontal, submenu segundo nivel vertical (oculto), submenu tercer nivel derecha.

La único que necesitara nuestra lista  es un id y con eso nos será suficiente.

01 <ul id="navmenu-h">
02  <li>
03  <a href="/">Inicio</a> <!-- Este es un uno de los menus -->
04  </li>
05  <li>
06  <a href="/servicios">Servicios</a>
07  <ul>              <!-- Esta es la lista del submenu, los li son los submenus -->
08  <li>            <!-- Este es un uno de los submenus -->
09  <a href="/noticias">Noticias</a>
10  </li>
11  </ul>
12  </li>
13  <li>
14  <a href="/ventas">Ventas</a>
15  <ul>
16  <li>            <!-- Este es un uno de los submenus -->
17  <a href="/reportes">Reportes</a>
18  </li>
19  <li>
20  <a href="/categoria">categoria</a>
21  <ul>              <!-- Esta es la lista del submenu 3er Nivel, los li son los submenus -->
22  <li>            <!-- Este es un uno de los submenus3 Nivel -->
23  <a href="/sucursal1">Surcursal 1</a>
24  </li>
25  <li>            <!-- Este es un uno de los submenus3 Nivel -->
26  <a href="/sucursal2">Surcursal 2</a>
27  </li>
28  <li>            <!-- Este es un uno de los submenus3 Nivel -->
29  <a href="/sucursal3">Surcursal 3</a>
30  </li>
31  </ul>
32  </li>
33  </ul>
34  </li>
35 </ul>

Y ha dicha lista agregaremos el siguiente css  Seguir leyendo [HTML – CSS] Menu desplegable usando HTML y CSS

Dejar un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *