Material Inspired menú desplegable animado

Vista prévia

Descripción

Un menú desplegable animado inspirado en material Design que utiliza transiciones CSS3 & transforma para animaciones de apertura/cierre del menú.

Funcionamiento

Crea un menú desplegable con un enlace de cierre en tu menú de navegación.

<ul class="nav">

<li><a href="#">Home</a></li>

<li><a href="#">Works</a></li>

<li><a href="#">Services</a></li>

<div class="material-dropdown">


<figure></figure>


<figure class="middle"></figure>


<p class="cross">x</p>


<figure></figure>


<ul class="dropdown">



<li><a href="#">Blog</a></li>



<li><a href="#">Contact</a></li>



<li><a href="#">About</a></li>



<li><a href="#">Social Media</a></li>


</ul>

</div>
</ul>

Las reglas de estilo CSS/CSS3 Core para el menú desplegable.

.nav { margin-left: 20%; }

.nav > li {

display: inline-block;

padding: 1em 18px;

cursor: pointer;
}

.nav > li:hover { background: #ebebeb; }

.dropdown {

position: absolute;

right: 0;

top: 3em;

transition: all 0.25s ease-out;

transform: scale(0);

transform-origin: 100% 0;

box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.16), 0 2px 8px 0 rgba(0, 0, 0, 0.12);
}

.dropdown li {

display: block;

width: 100%;
}

.dropdown li a {

width: 100%;

padding: 1em 18px;

display: inline-block;

white-space: pre;

box-sizing: border-box;
}

.dropdown li a:hover { background: #ebebeb; }

.dropdown:hover ul { transform: scale(1); }

.dropdown.active {

transform: scale(1);

transition: all 0.25s cubic-bezier(0.5, 1.8, 0.9, 0.8);
}

Estilo el botón de hamburguesa que se transformará en un botón de cierre para el menú desplegable.

.middle {

transition: all 0.25s cubic-bezier(0.72, 1.2, 0.71, 0.72);

transform: scale(1);

position: relative;

box-shadow: 0 0.1px 0.1px 0 rgba(0, 0, 0, 0.16), 0 0.1px 0.3px 0 rgba(0, 0, 0, 0.12);

-webkit-filter: blur(0.1px);

filter: blur(0.1px);
}

.middle.active {

transform: scale(4.5);

transition: all 0.25s cubic-bezier(0.32, 2.04, 0.85, 0.54);

box-shadow: 0 0.1px 0.1px 0 rgba(0, 0, 0, 0.16), 0 0.1px 0.3px 0 rgba(0, 0, 0, 0.12);
}

.cross {

position: absolute;

top: 50%;

left: 50%;

transform: translate(-50%, -50%) scale(0);

margin-top: -1px;

color: white;

transition: all 0.2s cubic-bezier(0.72, 1.2, 0.71, 0.72);

font-size: 22px;

user-select: none;
}

.cross.active {

transform: translate(-50%, -50%) scale(1);

transition: all 0.15s cubic-bezier(0.32, 2.04, 0.85, 0.54);
}

Un poco de magia JavaScript para activar el menú desplegable.

var materialdropdown = document.querySelector('.material-dropdown'),


middle = document.querySelector('.middle'),


cross = document.querySelector('.cross'),


dropdown = document.querySelector('.dropdown');

materialdropdown.addEventListener('click', function() {

middle.classList.toggle('active');

cross.classList.toggle('active');

dropdown.classList.toggle('active');
})