Pure CSS material morphing menu

Vista prévia

Descripción

Un menú de morphing inspirado en material Design que utiliza el clip-path de CSS3 para revelar un menú de navegación con un efecto de transición suave.

Funcionamiento

Cree el menú material con un icono de alternancia en su página web.

<nav>

<div class="navicon">


<div></div>

</div>

<a href="#">Menu Item 1</a>

<a href="#">Menu Item 2</a>

<a href="#">Menu Item 3</a>

<a href="#">Menu Item 4</a>

<a href="#">Menu Item 5</a>
</nav>

Las reglas básicas de CSS/CSS3 para el menú de navegación.

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);
}

Estilo y posición del icono de alternancia.

.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; }