Menú de morphing inspirado en material Design con transiciones CSS3

Vista prévia

Descripción

Un sistema de navegación CSS puro y creativo que se expande a una lista desplegable de menús con sutiles transiciones CSS3 cuando se ha mantenido, inspirado en Google material Design.

Funcionamiento

Cree una navegación regular con un icono de menú y una lista de elementos de menú.

<nav>

<div class="navicon">


<div></div>

</div>



<a>Home</a>

<a>Categories</a>

<a>Recommended</a>

<a>Blog</a>

<a>Contact</a>


</nav>

Animación de la navegación mediante transiciones CSS3.

nav {

width: 300px;

background: white;

color: rgba(0, 0, 0, 0.87);

-webkit-clip-path: circle(24px at 30px 24px);

clip-path: circle(24px at 32px 24px);

-webkit-transition: -webkit-clip-path 0.5625s, clip-path 0.375s;

transition: -webkit-clip-path 0.5625s, clip-path 0.375s;
}

nav:hover {

-webkit-transition-timing-function: ease-out;

transition-timing-function: ease-out;

-webkit-transition-duration: 0.75s;

transition-duration: 0.75s;

-webkit-clip-path: circle(390px at 225px 24px);

clip-path: circle(390px at 150px 24px);
}

a {

display: block;

line-height: 50px;

padding: 0 20px;

color: inherit;

cursor: pointer;

-webkit-user-select: none;

-moz-user-select: none;

-ms-user-select: none;

user-select: none;
}

a:hover { background: #ffe082; }

a:active { background: #ffca28; }

.navicon {

padding: 23px 20px;

cursor: pointer;

-webkit-transform-origin: 32px 24px;

-ms-transform-origin: 32px 24px;

transform-origin: 32px 24px;
}

.navicon div {

position: relative;

width: 20px;

height: 2px;

background: rgba(0, 0, 0, 0.87);
}

.navicon div:before,
.navicon div:after {

display: block;

content: "";

width: 20px;

height: 2px;

background: rgba(0, 0, 0, 0.87);

position: absolute;
}

.navicon div:before { top: -7px; }

.navicon div:after { top: 7px; }