Menú de alternancia solo de hamburguesa CSS

Vista prévia

Descripción

Un sofisticado CSS/CSS3 hamburguesa de navegación alternar que permite al usuario alternar un fuera de lienzo menú lateral haciendo clic en el botón de la hamburguesa de palanca en el encabezado.

Funcionamiento

Cree el botón de alternancia de cabecera.

<div class="header"></div>
<input type="checkbox" class="openSidebarMenu" id="openSidebarMenu">
<label for="openSidebarMenu" class="sidebarIconToggle">

<div class="spinner diagonal part-1"></div>

<div class="spinner horizontal"></div>

<div class="spinner diagonal part-2"></div>
</label>

Cree el menú de navegación fuera del lienzo.

<div id="sidebarMenu">

<ul class="sidebarMenuInner">


<li>Jelena Jovanovic <span>Web Developer</span></li>


<li><a href="https://vanila.io" target="_blank">Company</a></li>


<li><a href="https://instagram.com/plavookac" target="_blank">Instagram</a></li>


<li><a href="https://twitter.com/plavookac" target="_blank">Twitter</a></li>


<li><a href="https://www.youtube.com/channel/UCDfZM0IK6RBgud8HYGFXAJg" target="_blank">YouTube</a></li>


<li><a href="https://www.linkedin.com/in/plavookac/" target="_blank">Linkedin</a></li>

</ul>
</div>

Los estilos CSS necesarios para la navegación.

#sidebarMenu {

height: 100%;

position: fixed;

left: 0;

width: 250px;

margin-top: 60px;

transform: translateX(-250px);

transition: transform 250ms ease-in-out;

background: linear-gradient(180deg, #FC466B 0%, #3F5EFB 100%);
}

.sidebarMenuInner {

margin: 0;

padding: 0;

border-top: 1px solid rgba(255, 255, 255, 0.10);
}

.sidebarMenuInner li {

list-style: none;

color: #fff;

text-transform: uppercase;

font-weight: bold;

padding: 20px;

cursor: pointer;

border-bottom: 1px solid rgba(255, 255, 255, 0.10);
}

.sidebarMenuInner li span {

display: block;

font-size: 14px;

color: rgba(255, 255, 255, 0.50);
}

.sidebarMenuInner li a {

color: #fff;

text-transform: uppercase;

font-weight: bold;

cursor: pointer;

text-decoration: none;
}

Estilo & animar el botón de alternar hamburguesa.

input[type="checkbox"]:checked ~ #sidebarMenu { transform: translateX(0); }

input[type=checkbox] {

transition: all 0.3s;

box-sizing: border-box;

display: none;
}

.sidebarIconToggle {

transition: all 0.3s;

box-sizing: border-box;

cursor: pointer;

position: absolute;

z-index: 99;

height: 100%;

width: 100%;

top: 22px;

left: 15px;

height: 22px;

width: 22px;
}

.spinner {

transition: all 0.3s;

box-sizing: border-box;

position: absolute;

height: 3px;

width: 100%;

background-color: #fff;
}

.horizontal {

transition: all 0.3s;

box-sizing: border-box;

position: relative;

float: left;

margin-top: 3px;
}

.diagonal.part-1 {

position: relative;

transition: all 0.3s;

box-sizing: border-box;

float: left;
}

.diagonal.part-2 {

transition: all 0.3s;

box-sizing: border-box;

position: relative;

float: left;

margin-top: 3px;
}

input[type=checkbox]:checked ~ .sidebarIconToggle > .horizontal {

transition: all 0.3s;

box-sizing: border-box;

opacity: 0;
}

input[type=checkbox]:checked ~ .sidebarIconToggle > .diagonal.part-1 {

transition: all 0.3s;

box-sizing: border-box;

transform: rotate(135deg);

margin-top: 8px;
}

input[type=checkbox]:checked ~ .sidebarIconToggle > .diagonal.part-2 {

transition: all 0.3s;

box-sizing: border-box;

transform: rotate(-135deg);

margin-top: -9px;
}