Menú de navegación adaptable de varios niveles con Pure CSS
| Autor: | codezero-be |
|---|---|
| Views Total: | 11,037 |
| Sitio oficial: | Ir a la web |
| Actualizado: | January 28, 2015 |
| Licencia: | MIT |
Vista prévia
Descripción
Una navegación de CSS puro y amigable para móviles que transforma automáticamente tu navegación horizontal en un menú de acordeón vertical que se puede conmutable en dispositivos de pantalla más pequeños, con soporte para elementos de submenú ilimitados.
Funcionamiento
Cargue el Navigation. min. CSS requerido en la sección Head de su documento.
<link rel="stylesheet" href="css/navigation.min.css">
Agregue la clase CSS NAV-no-JS a la etiqueta HTML .
<html lang="en" class="nav-no-js">
Cree un botón de alternancia de navegación que solo aparezca en los dispositivos móviles.
<div class="nav-button"></div>
Cree su menú de navegación utilizando listas HTML anidadas.
<nav> <ul> <li><a href="#">Home</a></li> <li><a href="#">About</a></li> <li class="submenu"><a href="#">Services</a> <ul> <li><a href="#">Some Service</a></li> <li><a href="#">Another Service</a></li> <li><a href="#">Good Service</a></li> <li><a href="#">Room Service</a></li> </ul> </li> <li class="submenu"><a href="#">Products</a> <ul> <li><a href="#">Food</a></li> <li class="submenu"><a href="#">Drinks</a> <ul> <li><a href="#">Water</a></li> <li class="submenu"><a href="#">Cola</a> <ul> <li class="submenu nav-left"><a href="#">Coca Cola</a> <ul> <li><a href="#">This one goes left!</a></li> <li><a href="#">Too much sugar...</a></li> <li><a href="#">Yummy</a></li> </ul> </li> <li><a href="#">Pepsi</a></li> <li><a href="#">River</a></li> </ul> </li> <li><a href="#">Lemonade</a></li> </ul> </li> <li><a href="#">Candy</a></li> <li><a href="#">Ice Cream</a></li> </ul> </li> <li class="submenu"><a href="#">Albums</a> <ul> <li><a href="#">Christmas</a></li> <li><a href="#">New Year</a></li> <li><a href="#">Easter</a></li> </ul> </li> <li><a href="#">Contact</a></li> </ul> </nav>
Cree un botón de cierre para descartar el menú de acordeón en dispositivos móviles.
<div class="nav-close"></div>
