CSS sólo Togglable navegación lateral de pantalla completa

Vista prévia

Descripción

Una barra lateral de navegación que permite mostrar y ocultar un menú de pantalla completa usando CSS/CSS3 puro.

Funcionamiento

Crear el menú de navegación a pantalla completa:

<aside class="sidebar">

<ul class="menu">


<li class="menu__item"><a class="menu__link" href="#">Home</a></li>


<li class="menu__item"><a class="menu__link" href="#">Category</a></li>


<li class="menu__item"><a class="menu__link" href="#">Blog</a></li>


<li class="menu__item"><a class="menu__link" href="#">About</a></li>


<li class="menu__item"><a class="menu__link" href="#">Contact</a></li>

</ul>
</aside>

Crear un botón de alternar menú de hamburguesa utilizando elementos de casilla de verificación y etiqueta:

<input type="checkbox" id="menuToggler" class="input-toggler"/>
<label for="menuToggler" class="menu-toggler">

<span class="menu-toggler__line"></span>

<span class="menu-toggler__line"></span>

<span class="menu-toggler__line"></span>
</label>

El CSS principal para el estilo del menú de navegación.

.sidebar {

-webkit-transition: all .25s ease-out;

transition: all .25s ease-out;
}

.sidebar {

width: var(--sidebar-width);

-webkit-transform: translateX(calc(var(--sidebar-width) * -1));

transform: translateX(calc(var(--sidebar-width) * -1));

background: -webkit-linear-gradient(top left, Tomato, Wheat);

background: linear-gradient(to bottom right, Tomato, Wheat);

display: -webkit-box;

display: -ms-flexbox;

display: flex;

-webkit-box-pack: center;

-ms-flex-pack: center;

justify-content: center;

-webkit-box-align: center;

-ms-flex-align: center;

align-items: center;

position: absolute;

top: 0;

height: 100vh;

opacity: .5;
}

.content {

width: 100%;

display: -webkit-box;

display: -ms-flexbox;

display: flex;

-webkit-box-align: center;

-ms-flex-align: center;

align-items: center;

-webkit-box-pack: center;

-ms-flex-pack: center;

justify-content: center;

-webkit-box-orient: vertical;

-webkit-box-direction: normal;

-ms-flex-direction: column;

flex-direction: column;
}

.menu { list-style-type: none; }

.menu__link {

color: white;

font-weight: 100;

text-decoration: none;

font-size: 10vmin;

line-height: 15vmin;

-webkit-transition: all .25s ease-out;

transition: all .25s ease-out;
}

.menu__link:hover, .menu__link:focus, .menu__link:active { color: Gold; }

Estilo & animar el Toggler menú hamburguesa.

.menu-toggler {

display: block;

width: var(--toggler-size);

height: var(--toggler-size);

position: relative;

position: fixed;

top: 10px;

left: 10px;

cursor: pointer;

z-index: 1;
}

.menu-toggler__line {

height: calc(var(--toggler-size) / 5);

background: Tomato;

position: absolute;

left: 0;

right: 0;

-webkit-transition: all .25s ease-out;

transition: all .25s ease-out;
}

.menu-toggler__line:nth-child(2) {
top: calc(var(--toggler-size) / 5 * 2);
}

.menu-toggler__line:nth-child(3) {
top: calc(var(--toggler-size) / 5 * 4);
}

.input-toggler {

position: absolute;

left: -100%;
}

.input-toggler:checked ~ .menu-toggler .menu-toggler__line { background: Wheat; }

.input-toggler:checked ~ .menu-toggler .menu-toggler__line:nth-child(1) {
-webkit-transform: translateY(calc(var(--toggler-size) / 5 * 2)) rotate(45deg);
 transform: translateY(calc(var(--toggler-size) / 5 * 2)) rotate(45deg);
}

.input-toggler:checked ~ .menu-toggler .menu-toggler__line:nth-child(2) { opacity: 0; }

.input-toggler:checked ~ .menu-toggler .menu-toggler__line:nth-child(3) {
-webkit-transform: translateY(calc(var(--toggler-size) / 5 * -2)) rotate(-45deg);
 transform: translateY(calc(var(--toggler-size) / 5 * -2)) rotate(-45deg);
}

.input-toggler:checked ~ .sidebar {

-webkit-transform: translateX(0);

transform: translateX(0);

opacity: .98;
}