Navegación de cajón adaptable en CSS puro
| Autor: | christabor |
|---|---|
| Views Total: | 5,700 |
| Sitio oficial: | Ir a la web |
| Actualizado: | July 14, 2015 |
| Licencia: | MIT |
Vista prévia
Descripción
Una solución de navegación adaptable que utiliza el pseudo selector de entrada: comprobado para revelar un menú de cajón deslizándose desde la parte izquierda o derecha de la pantalla. Puede cambiar el punto de interrupción a través de las consultas de medios en el CSS.
Funcionamiento
Cargue el menú. CSS de la hoja de estilos del núcleo en la sección de la cabeza .
<link rel="stylesheet" type="text/css" href="menu.css">
Cree un conmutador de menú basado en la casilla.
<input type="checkbox" id="mobile-menu-toggle" class="mobile-menu-toggle mobile-menu-toggle-button">
Cree un menú de navegación estándar a partir de una lista de NAV.
<ul id="plain-menu" class="mobile-toggleable-menu mobile-left"> <li><a href="#">Home</a></li> <li><a href="#">About</a></li> <li><a href="#">Contact</a></li> <li><a href="#">Portfolio</a></li> </ul>
Reemplace el móvil-a la izquierda con el móvil-derecha para revelar el menú del cajón en el lado derecho.
<ul id="plain-menu" class="mobile-toggleable-menu mobile-right"> <li><a href="#">Home</a></li> <li><a href="#">About</a></li> <li><a href="#">Contact</a></li> <li><a href="#">Portfolio</a></li> </ul>
Cree un icono de alternancia.
<label class="mobile-left mobmenu-toggle" for="mobile-menu-toggle">+</label>
Estilo del menú del cajón lo que quieras.
.mobile-toggleable-menu {
background-color: #333;
color: #fff;
display: block;
width: 100%;
height: 40px;
padding: 0;
}
.mobmenu-toggle {
background-color: orange;
color: #fff;
font-size: 35px;
text-decoration: none;
text-align: center;
font-weight: bold;
height: 50px;
line-height: 50px;
}
.mobile-toggleable-menu li {
display: inline-block;
padding: 0;
margin: 0;
height: 40px;
line-height: 40px;
}
.mobile-toggleable-menu li a {
height: 100%;
width: 100%;
display: inline-block;
border-bottom: 1px solid #444;
text-decoration: none;
color: #fff;
padding: 0 20px;
}
.mobile-toggleable-menu li a:hover {
background-color: #222;
color: orange;
}
.mobmenu-toggle:hover { background-color: darkOrange; }
