Menú deslizante de navegación Push en CSS puro
| Autor: | james_zedd |
|---|---|
| Views Total: | 3,670 |
| Sitio oficial: | Ir a la web |
| Actualizado: | June 25, 2017 |
| Licencia: | MIT |
Vista prévia
Descripción
Un cajón de navegación fuera de lienzo que se desliza hacia fuera y empuja el contenido principal a la derecha cuando se abre, completamente escrito en HTML puro y CSS.
Funcionamiento
Cree un icono de alternancia para la navegación del cajón. En este caso, vamos a usar Font awesome icónico Font para el ícono.
<input type="checkbox" id="menu-toggle" /> <label for="menu-toggle" class="menu-icon"><i class="fa fa-bars"></i></label>
Cree el contenido principal junto con un menú de cajón en la Página Web.
<div class="content-container"> Main Content Here </div> <div class="slideout-sidebar"> <ul> <li>Home</li> <li>About</li> <li>Blog</li> <li>Contact</li> </ul> </div>
Estilo del contenido principal & menú del cajón.
/* -- Slideout Sidebar -- */
.slideout-sidebar {
position: fixed;
top: 0;
left: -190px;
z-index: 0;
width: 150px;
height: 100%;
padding: 20px;
background-color: #212121;
transition: all 300ms ease-in-out;
}
/* -- Slideout Sidebar -- */
.slideout-sidebar {
position: fixed;
top: 0;
left: -190px;
z-index: 0;
width: 150px;
height: 100%;
padding: 20px;
background-color: #212121;
transition: all 300ms ease-in-out;
}
.slideout-sidebar ul {
list-style: none;
margin: 0;
padding: 0;
}
.slideout-sidebar ul li {
cursor: pointer;
padding: 18px 0;
border-bottom: 1px solid rgba(244,244,244,0.4);
color: rgba(244,244,244,0.7);
}
.slideout-sidebar ul li:last-child {
border-bottom: 0;
}
.slideout-sidebar ul li:hover {
color: rgba(244,244,244,1);
} Habilite el icono de alternancia de menú.
#menu-toggle {
display: none;
}
.menu-icon {
position: absolute;
top: 18px;
left: 30px;
font-size: 24px;
z-index: 1;
transition: all 300ms ease-in-out;
}
/*-- The Magic --*/
#menu-toggle:checked ~ .slideout-sidebar {
left: 0px;
}
#menu-toggle:checked + .menu-icon {
left: 210px;
}
#menu-toggle:checked ~ .content-container {
padding-left: 190px;
} El CSS para hacer la navegación del cajón funcionan bien en la pantalla pequeña.
@media (max-width: 991px) {
.content-container {
max-width: 480px;
}
}
@media (max-width: 767px) {
.content-container {
max-width: 100%;
margin: 30px auto 0;
}
#menu-toggle:checked ~ .content-container {
padding-left: 0;
}
.slideout-sidebar ul {
text-align: center;
max-width: 200px;
margin: 30px auto 0;
}
.menu-icon {
left: 20px
}
#menu-toggle:checked ~ .slideout-sidebar {
width: 100%;
}
#menu-toggle:checked + .menu-icon {
left: 87%;
color: #fafafa;
}
@media screen
and (max-width: 736px)
and (orientation: landscape) {
.slideout-sidebar {
padding: 0;
}
.slideout-sidebar ul {
max-width: 100%;
margin: 60px auto 0;
}
.slideout-sidebar ul li {
display: inline-block;
border-bottom: 0;
width: 72px;
padding: 18px 24px;
margin: 0 6px 12px;
color: #ffffff;
background-color: #777;
}
}
}
