Puro CSS/CSS3 navegación lateral fuera de la pantalla

Vista prévia

Descripción

Una implementación CSS pura del familiar menú de navegación lateral fuera de lienzo que utiliza transiciones CSS3 para las animaciones de diapositivas.

Funcionamiento

Cree una entrada de casilla de verificación con la etiqueta para el botón de alternancia.

<input type="checkbox" id="sidebartoggler">
<label class="toggle" for="sidebartoggler">☰</label>

Cree el menú de navegación lateral con la lista desordenada HTML.

<div class="sidebar">

<ul>


<li>Home</li>


<li>Projects</li>


<li>Clients</li>


<li>Blog</li>


<li>Contact</li>

</ul>
</div>

Envuelva el contenido principal en el contenedor "contenido de la página".

<div class="page-content">

<!---Page content goes here...-->
</div>

El CSS para el menú de navegación lateral.

.toggle {

position: fixed;

top: 20px;

right: 0;

bottom: 0;

left: 20px;

-webkit-transition: all 0.5s ease;

-moz-transition: all 0.5s ease;

transition: all 0.5s ease;

z-index: 1;

font-size: 30px;

color: black;

width: 30px;

height: 30px;

cursor: pointer;
}

.toggle:hover { color: #29D4E8; }

.sidebar {

-webkit-transition: all 0.5s ease;

-moz-transition: all 0.5s ease;

transition: all 0.5s ease;

position: fixed;

top: 0px;

right: 0;

bottom: 0px;

left: -190px;

width: 120px;

padding: 30px;

background: #333;

color: white;

z-index: 0;
}

.sidebar ul {

list-style-type: none;

margin: 0;

padding: 0;
}

.sidebar li {

text-transform: uppercase;

opacity: .5;

cursor: pointer;

-webkit-transition: all 0.5s ease-in;

-moz-transition: all 0.5s ease-in;

transition: all 0.5s ease-in;
}

.sidebar li:hover {

opacity: 1;

color: #29D4E8;
}

El CSS necesario para el botón de alternancia.

#sidebartoggler { display: none; }

#sidebartoggler:checked + .page-wrapper .sidebar { left: 0px; }

#sidebartoggler:checked + .page-wrapper .toggle { left: 200px; }

#sidebartoggler:checked + .page-wrapper .page-content { padding-left: 200px; }

Añade efectos de transición al contenido principal al alternar el menú de navegación lateral.

.page-content {

-webkit-transition: all 0.5s ease;

-moz-transition: all 0.5s ease;

transition: all 0.5s ease;

position: relative;

z-index: 0;

width: 50%;

margin: 0 auto;

text-align: center;

color: #333;
}