Solo CSS menú de navegación deslizante de pantalla completa
| Autor: | jlnljn |
|---|---|
| Views Total: | 3,554 |
| Sitio oficial: | Ir a la web |
| Actualizado: | August 24, 2016 |
| Licencia: | MIT |
Vista prévia
Descripción
Solo otro menú de hamburguesas CSS/CSS3 puro que desliza un menú de navegación a pantalla completa al alternar.
Funcionamiento
Cree una lista de navegación como sigue:
<nav> <ul> <li><a href="#">Link #1</a></li> <li><a href="#">Link #2</a></li> <li><a href="#">Link #3</a></li> </ul> </nav>
El HTML para el menú de hamburguesa alternar.
<input id="burger" type="checkbox" /> <label for="burger"> <span></span> <span></span> <span></span> </label>
El CSS principal para el menú de la hamburguesa alternar.
input + label {
position: fixed;
top: 40px;
right: 40px;
height: 20px;
width: 15px;
z-index: 5;
}
input + label span {
position: absolute;
width: 100%;
height: 2px;
top: 50%;
margin-top: -1px;
left: 0;
display: block;
background: #020304;
transition: .5s;
}
input + label span:first-child { top: 3px; }
input + label span:last-child { top: 16px; }
label:hover { cursor: pointer; }
input:checked + label span {
opacity: 0;
top: 50%;
}
input:checked + label span:first-child {
opacity: 1;
transform: rotate(405deg);
}
input:checked + label span:last-child {
opacity: 1;
transform: rotate(-405deg);
} Estilo del menú de navegación con el siguiente CSS:
input ~ nav {
background: white;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100px;
z-index: 3;
transition: .5s;
transition-delay: .5s;
overflow: hidden;
}
input ~ nav > ul {
text-align: center;
position: absolute;
top: 35%;
left: 20%;
right: 20%;
}
input ~ nav > ul > li {
opacity: 0;
transition: .5s;
transition-delay: 0s;
}
input ~ nav > ul > li > a {
text-decoration: none;
text-transform: uppercase;
color: #020304;
font-weight: 700;
font-family: sans-serif;
display: block;
padding: 30px;
}
input:checked ~ nav {
height: 100%;
transition-delay: 0s;
}
input:checked ~ nav > ul > li {
opacity: 1;
transition-delay: .5s;
}
