Menu animated
Menu animado con hover y desplazamiento de elementos
by Martin Miranda
HTML
<nav class="menu">
<div class="enlace">
<div class="part-enlace">PRODUCTO<span>></span></div>
<div class="part-text">Revestimientos Plásticos Texturados</div>
</div>
<div class="enlace">
<div class="part-enlace">FRANQUICIAS<span>></span></div>
<div class="part-text">Forma parte de un qeuipo lider en el mercado</div>
</div>
<div class="enlace">
<div class="part-enlace">PROFESIONALES<span>></span></div>
<div class="part-text">Conoce nuestro programa de fidelización</div>
</div>
<div class="enlace">
<div class="part-enlace">PUNTOS DE VENTA<span>></span></div>
<div class="part-text">Encuentra nuestro franquiciado más cercana</div>
</div>
</nav>
CSS
/**
* The first commented line is your dabblet’s title
*/
body,html{
background:rgba(0,0,0,1);
min-height: 100%;
margin:0 0;
padding:0 0;
}
.menu{
padding:0 0;
margin:0 0;
}
.enlace{
font-family:Arial;
font-size:14px;
background-color:rgba(30,30,30,1);
padding:0 0;
margin:0 0;
padding:20px;
margin-bottom:5px;
}
.enlace:hover{
background-color:#800001;
}
.part-enlace{
color:rgba(100,100,100,1);
transform:translate(100px,0px);
transition:all .2s linear;
position:relative;
left:20%;
}
.part-text{
transform:translate(400px,0px);
color:rgba(0,0,0,1);
opacity:0;
transition:all .2s ease-in;
text-align:right;
position:relative;
left:25%;
}
.enlace:hover>.part-enlace{
color:white;
transform:translate(-30px,0px);
}
.enlace:hover>.part-enlace>span{
transform:rotate(0deg);
}
.enlace:hover>.part-text{
transform:translate(100px,0px);
opacity:1;
}
.enlace>div{
display:inline-block;
}
.enlace>div>span{
margin-left:10px;
display:inline-block;
transform:rotate(90deg);
transition:transform .2s linear;
}