.jpg)
Este es un pequeño y rápido tutorial de como hacer un menú para móviles con animacion con HTML5 CSS3 y JQuery.
Conforme algunos pedidos de como estamos desarrollando nuestra web y el menú de navegación en móviles aqui les dejo una rápida explicación de como lo hice.
1. Primero el creamos el menú en HTML:
2. Pasamos al los estilos CSS3:
.parent2 {
top:15px;
right:15px;
position:fixed;
display:block;
width:55px;
height:55px;
background-color:transparent;
border-radius:50%;
z-index:20;
/*-webkit-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.75);
-moz-box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.75);
box-shadow: 0px 0px 5px 0px rgba(0,0,0,0.75);*/
}
.test1 {
width:80%;
height:80%;
background-color:dimGray;
border-radius:50%;
position:absolute;
color:white;
text-align:center;
line-height:20px;
top:15%;
left:15%;
z-index:19;
transition: all 100ms cubic-bezier(0.680, -0.550, 0.265, 1.550);
font-size:1.4em;
}
.test1 i{
position:absolute;
left:25%;
top:25%;
}
.test2 {
width:80%;
height:80%;
background-color:dimGray;
border-radius:50%;
position:absolute;
color:white;
text-align:center;
line-height:20px;
top:15%;
left:15%;
z-index:19;
transition: all 100ms cubic-bezier(0.680, -0.550, 0.265, 1.550) .2s;
font-size:1.4em;
}
.test2 i{
position:absolute;
left:22%;
top:25%;
}
.test3 {
width:80%;
height:80%;
background-color:dimGray;
border-radius:50%;
position:absolute;
color:white;
text-align:center;
line-height:20px;
top:15%;
left:15%;
transition: all 100ms cubic-bezier(0.680, -0.550, 0.265, 1.550) .4s;
font-size:1.4em;
}
.test3 i{
position:absolute;
left:23%;
top:25%;
}
.test4 {
width:80%;
height:80%;
background-color:dimGray;
border-radius:50%;
position:absolute;
color:white;
text-align:center;
line-height:20px;
top:15%;
left:15%;
transition: all 100ms cubic-bezier(0.680, -0.550, 0.265, 1.550) .6s;
font-size:1.4em;
}
.test4 i{
position:absolute;
left:25%;
top:25%;
}
.mask2 {
top:15px;
right:15px;
width:55px;
height:55px;
background:red;
border-radius:50%;
position:absolute;
z-index:21;
color:white;
text-align:center;
line-height:80px;
cursor:pointer;
position:fixed;
}
.mask2 i{
position:absolute;
left:25%;
top:24%;
}
3. Importamos Jquery y Fontawesome (este para los iconos de los botones) que lo colocamos entre las estiqueas <head></head> de nuestra página.
4. Este es el Script que anima el menu:
Pueden ver el menu en fucnionamiento en : DBK Uruguay desde su móvil o reduciendo el navegador.
Espero les sea de ayuda, y lo puedan utilizar en sus proyectos.
para saber más: Pablo M. Francisco
Muy buen aporte (y)
ResponderEliminar