Menú lateral de morphing con Pure CSS/CSS3

Vista prévia

Descripción

Un menú de morphing inspirado en material Design que utiliza transiciones y transformaciones CSS3 para transformar un menú alternando en un menú lateral con transiciones suaves.

¿Cómo funciona?

Cree una casilla de verificación que le permita abrir/cerrar el menú lateral.

<input type="checkbox" id="menuTrigger">

Crea un menú lateral con una palanca de hamburguesas.

<div class="menu">

<h3>Contact us</h3>

<label for="menuTrigger" class="trigger">


<div class="line"></div>


<div class="line"></div>


<div class="line"></div>

</label>

<ul class="links">


<li class="link"><a href="#">Google+</a></li>


<li class="link"><a href="#">Facebook</a></li>


<li class="link"><a href="#">Twitter</a></li>


<li class="link"><a href="#">CodePen</a></li>


<li class="link"><a href="#">Github</a></li>


<li class="link"><a href="#">Linkedin</a></li>


<li class="link"><a href="#">Pinterest</a></li>


<li class="link"><a href="#">Instagram</a></li>


<li class="link"><a href="#">Stumbleupon</a></li>

</ul>
</div>

El CSS principal para el menú lateral.

.menu {

position: absolute;

top: 0;

left: 0;

z-index: 10;

height: 370px;

width: 170px;

overflow: hidden;

pointer-events: none;

-webkit-user-select: none;

-moz-user-select: none;

-ms-user-select: none;

user-select: none;
}

.menu * {

-webkit-backface-visibility: hidden;

backface-visibility: hidden;
}

#menuTrigger:checked ~ .menu { pointer-events: auto; }

.menu h3 {

position: absolute;

top: 10px;

left: 10px;

z-index: 1;

margin: 0;

font-size: 1em;

font-weight: normal;

line-height: 56px;

color: white;

-webkit-transform: translate3d(-170px, 0, 0);

transform: translate3d(-170px, 0, 0);

-webkit-transition: -webkit-transform 0.4s ease-in-out;

transition: transform 0.4s ease-in-out;
}

.menu .links {

position: relative;

z-index: 1;

list-style: none;

color: white;

margin: 76px 0 0 0;

padding: 0;
}

.menu .link {

font-size: 16px;

line-height: 1;

margin: 0;

padding: 0;

-webkit-transition: -webkit-transform 0.4s ease-in-out;

transition: transform 0.4s ease-in-out;
}

.menu .link a {

display: block;

color: currentColor;

padding: 10px;

text-decoration: none;
}

.menu .link a:hover { background-color: rgba(255, 255, 255, 0.1); }

Los estilos CSS/CSS3 para el desencadenador de menú basado en la casilla de verificación.

.menu .trigger {

position: absolute;

z-index: 0;

top: 10px;

left: 10px;

height: 56px;

width: 56px;

border-radius: 100%;

cursor: pointer;

pointer-events: auto;

-webkit-transition: all 0.4s ease-in-out;

transition: all 0.4s ease-in-out;

-webkit-transition-property: -webkit-transform, box-shadow;

transition-property: transform, box-shadow;

-webkit-transform: translate3d(0, 0, 0);

transform: translate3d(0, 0, 0);

box-shadow: 0 0 0 0px #424242;
}

.menu .trigger:before {

content: '';

position: absolute;

top: 0;

left: 0;

height: 100%;

width: 100%;

border-radius: inherit;

overflow: hidden;

-webkit-transform: translate3d(0, 0, 0);

transform: translate3d(0, 0, 0);

-webkit-transition: box-shadow 0.2s 0.4s ease-in-out;

transition: box-shadow 0.2s 0.4s ease-in-out;

box-shadow: 0 0 0 28px #424242 inset, 0 0 0 28px #FF5722 inset;
}

#menuTrigger:checked ~ .menu .trigger {

-webkit-transform: translate3d(94px, 0, 0);

transform: translate3d(94px, 0, 0);

box-shadow: 0 0 0 370px #424242;
}

#menuTrigger:checked ~ .menu .trigger:before {

-webkit-transition-delay: 0s;

transition-delay: 0s;

box-shadow: 0 0 0 0 #424242 inset, 0 0 0 28px #FF5722 inset;
}

#menuTrigger:checked ~ .menu .trigger .line:nth-child(1) {

-webkit-transform: translateY(0) translate3d(-50%, -50%, 0);

transform: translateY(0) translate3d(-50%, -50%, 0);
}

#menuTrigger:checked ~ .menu .trigger .line:nth-child(3) {

-webkit-transform: translateY(0) translate3d(-50%, -50%, 0);

transform: translateY(0) translate3d(-50%, -50%, 0);
}

.menu .trigger .line {

position: absolute;

top: 50%;

left: 50%;

background: white;

height: 2px;

width: 18.66667px;

-webkit-transform: translate3d(-50%, -50%, 0);

transform: translate3d(-50%, -50%, 0);

-webkit-transition: -webkit-transform 0.4s ease-in-out;

transition: transform 0.4s ease-in-out;
}

.menu .trigger .line:nth-child(1) {

-webkit-transform: translateY(-5px) translate3d(-50%, -50%, 0);

transform: translateY(-5px) translate3d(-50%, -50%, 0);
}

.menu .trigger .line:nth-child(3) {

-webkit-transform: translateY(5px) translate3d(-50%, -50%, 0);

transform: translateY(5px) translate3d(-50%, -50%, 0);
}

#menuTrigger {

position: fixed;

top: 0;

left: -20px;
}

Añadir animaciones de transformación a cada menú enlaces.

#menuTrigger:checked ~ .menu h3 {

-webkit-transform: translate3d(0, 0, 0);

transform: translate3d(0, 0, 0);

-webkit-transition-delay: 0.2s;

transition-delay: 0.2s;
}

#menuTrigger:checked ~ .menu .link {

-webkit-transition-delay: 0.2s;

transition-delay: 0.2s;
}

#menuTrigger:checked ~ .menu .link:nth-child(1) {

-webkit-transform: translate3d(0, 0, 0);

transform: translate3d(0, 0, 0);
}

#menuTrigger:checked ~ .menu .link:nth-child(2) {

-webkit-transform: translate3d(0, 0, 0);

transform: translate3d(0, 0, 0);
}

#menuTrigger:checked ~ .menu .link:nth-child(3) {

-webkit-transform: translate3d(0, 0, 0);

transform: translate3d(0, 0, 0);
}

#menuTrigger:checked ~ .menu .link:nth-child(4) {

-webkit-transform: translate3d(0, 0, 0);

transform: translate3d(0, 0, 0);
}

#menuTrigger:checked ~ .menu .link:nth-child(5) {

-webkit-transform: translate3d(0, 0, 0);

transform: translate3d(0, 0, 0);
}

#menuTrigger:checked ~ .menu .link:nth-child(6) {

-webkit-transform: translate3d(0, 0, 0);

transform: translate3d(0, 0, 0);
}

#menuTrigger:checked ~ .menu .link:nth-child(7) {

-webkit-transform: translate3d(0, 0, 0);

transform: translate3d(0, 0, 0);
}

#menuTrigger:checked ~ .menu .link:nth-child(8) {

-webkit-transform: translate3d(0, 0, 0);

transform: translate3d(0, 0, 0);
}

.menu .link:nth-child(1) {

-webkit-transform: translate3d(-100%, 0, 0);

transform: translate3d(-100%, 0, 0);
}

.menu .link:nth-child(2) {

-webkit-transform: translate3d(-200%, 0, 0);

transform: translate3d(-200%, 0, 0);
}

.menu .link:nth-child(3) {

-webkit-transform: translate3d(-300%, 0, 0);

transform: translate3d(-300%, 0, 0);
}

.menu .link:nth-child(4) {

-webkit-transform: translate3d(-400%, 0, 0);

transform: translate3d(-400%, 0, 0);
}

.menu .link:nth-child(5) {

-webkit-transform: translate3d(-500%, 0, 0);

transform: translate3d(-500%, 0, 0);
}

.menu .link:nth-child(6) {

-webkit-transform: translate3d(-600%, 0, 0);

transform: translate3d(-600%, 0, 0);
}

.menu .link:nth-child(7) {

-webkit-transform: translate3d(-700%, 0, 0);

transform: translate3d(-700%, 0, 0);
}

.menu .link:nth-child(8) {

-webkit-transform: translate3d(-800%, 0, 0);

transform: translate3d(-800%, 0, 0);
}