Menú de hamburguesa en expansión con CSS puro

Vista prévia

Descripción

Una navegación deslizante HTML/CSS sencilla que expande el icono de la hamburguesa en un menú lateral al alternar.

Funcionamiento

Crear el menú de hamburguesa e insertarlo junto con el desencadenador de menú basado en la casilla de verificación en un contenedor.

<span class="checkbox-container">

<input class="checkbox-trigger" type="checkbox"
/>

<span class="menu-content">



<ul>




<li>Home</li>




<li>About</li>




<li>Contact</li>




<li>Blog</li>




<li>Social</li>



</ul>


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

</span>
</span>

Estilo del contenido del menú en el CSS.

.checkbox-container {

display: block;

float: left;

width: 50px;

height: 50px;

position: relative;

background: #182825;
}

.menu-content {

display: flex;

background: #182825;

color: white;

float: left;
}

.menu-content ul {

display: block;

padding-left: 0;

padding-top: 1em;

padding-bottom: 1em;

margin: 0;

width: 0px;

height: 0px;

overflow: hidden;

transition: height 0.3s ease 0.7s, width 0.7s ease;
}

.menu-content ul li {

list-style: none;

padding-top: 1em;

padding-bottom: 1em;

cursor: pointer;

transition: color 0.5s, background 0.5s;
}

.menu-content ul li:hover {

color: #0CD6AD;

background: #1E332F;
}

Estilo del gatillo de hamburguesa:

.checkbox-trigger {

opacity: 0;

position: absolute;

width: 50px;

height: 50px;

left: 0px;

cursor: pointer;

z-index: 5;
}

.hamburger-menu, .hamburger-menu::before, .hamburger-menu::after {

display: block;

position: absolute;

background: white;

width: 40px;

height: 4px;

margin: 1.3em 3em;

transition: background 0.3s;
}

.hamburger-menu::before, .hamburger-menu::after {

content: '';

position: absolute;

margin: -0.7em 0 0;

transition: width 0.7s ease 0.3s, transform 0.7s ease 0.3s;
}

.hamburger-menu::after { margin-top: 0.7em; }

.hamburger-menu {

position: relative;

display: block;

margin: 0;

margin-top: 1.45em;

margin-right: 0.35em;

margin-left: 0.35em;

margin-bottom: 1.45em;

transition: width 0.3s ease;
}

El núcleo CSS hacks para alternar el menú de hamburguesa usando la casilla de verificación.

.checkbox-trigger:checked { left: 202px; }

.checkbox-trigger:checked + .menu-content .hamburger-menu {

width: 2em;

transition: width 0.7s ease 0.7s;
}

.checkbox-trigger:checked + .menu-content .hamburger-menu::before {

width: 1.2em;

transform: rotate(-35deg);

margin-top: -0.4em;
}

.checkbox-trigger:checked + .menu-content .hamburger-menu::after {

width: 1.2em;

transform: rotate(35deg);

margin-top: 0.4em;
}

.checkbox-trigger:checked + .menu-content ul {

width: 200px;

height: 200px;

transition: width 0.7s ease 0.3s, height 0.3s ease;
}