sábado, 30 de marzo de 2013

Menú horizontal flotante que se expande al pasar en cursor


En estos días he estado jugando un poco con CSS3, y bueno se me ocurrió hacer un menú horizontal usando únicamente CSS3, esto para no hace que nuestro blogs se cargue mucho de script, a diferencia de muchos menús que ya has visto, (espero no allás visto ya uno igual) este menú estará flotando y oculto momentaneamente en nuestro blogs de tal manera que con solo pasar en cursor sobre la en botón "menú"se expande mostrando todas las opciones de nuestro menú, como si fuera una armónica (al menos yo así lo veo), y por si fuera poco le he agregado un ángulo de rotación de -30 grados para darle mas elegancia, claro que todo esto lo puedes editar puedes ver el ejemplo: que flota en tutoblogger o en la imagen de arriba.

Para agregar este menú a nuestro blogs ve a la Edición HTML de tu blog y antes de ]]></b:skin> y pega lo siguiente:



ul.menuflotante {
position: relative;
width: 100%;
margin: 20px auto;
text-align: center;
list-style-type: none;
font-family: "Arial";
font-size: 13pt;/* tamaño de letras*/
color: white;
}
ul.menuflotante li {
display: inline;
margin: 0;
padding: 0;
}
ul.menuflotante li a {
-o-border-radius: 5px;/* radio de borde*/
-ms-border-radius: 5px;/* radio de borde*/
-webkit-border-radius: 5px;/* radio de borde*/
-moz-border-radius: 5px;/* radio de borde*/
border-radius: 5px;
-webkit-box-shadow: 0px 0px 4px #696969;
-moz-box-shadow: 0px 0px 4px #696969;
box-shadow: 0px 0px 4px #696969;
padding: 5px;
position: absolute;
opacity: 0;
display: inline-block;
left: 50%;
margin-left: -50px;
text-decoration: none;
color: white;
background:#e51431;/* Color de botones*/
width:100px;/*ancho de botones */
height:70px;/* alto de botones*/
transition: all .8s ease;
}
ul.menuflotante li:last-of-type a {
opacity: 1;
}
ul.menuflotante a span {
position: relative;
top:40%;
padding: 5px;
text-align: center;
}
ul.menuflotante:hover li a {
color: white;
background:#e51431 ;
opacity: 1;
-webkit-transition:all .8s ease;
-o-transition:all .8s ease;
-moz-transition:all .8s ease;
-ms-transition:all .8s ease;
transition:all .8s ease;
}

ul.menuflotante:hover li:nth-of-type(1) a {
margin-left: -50px;/*posicion del boton 1*/
}
ul.menuflotante:hover li:nth-of-type(2) a {
margin-left: 50px;/*posicion del boton 2*/
}
ul.menuflotante:hover li:nth-of-type(3) a {
margin-left: 150px;/*posicion del boton 3*/
}
ul.menuflotante:hover li:nth-of-type(4) a {
margin-left: 250px;/* posicion del boton 4*/
}
ul.menuflotante:hover li:nth-of-type(5) a {
margin-left: 350px;/* posicion del boton 5*/
}
ul.menuflotante:hover li:last-of-type a {
opacity: 0;
top: -1000px;/* posicion del boton menu*/
}
ul.menuflotante a:hover {
transform: rotate(-30deg);/* angulo de rotacion*/
}
#flotador {
position:fixed;
bottom:100px;
left:60px;
}
/* menu flotante creado por tutoblogger*/

Ahora en Diseño,ve a Añadir Gadget,HTML/Javascript y pega lo siguiente:
<div id="flotador">
<ul class="menuflotante">
<li><a href="Url de Enlace">Inicio</a></li>
<li><a href="Url de Enlace">Mapa del blogs</a></li>
<li><a href="Url de Enlace">Contacto</a></li>
<li><a href="Url de Enlace">Enlazanos</a></li>
<li><a href="Url de Enlace">sobre nosotros</a></li>
<li><a href="#">Menu</a></li>
</ul>
</div> 


guardas los cambios y listo. toma en cuanta que este menú se vera bien usando navegadores resientes, y claro no funciona con IE. Lo que se encuentra en rojo y azul pueden editar.


1 comentario:

  1. Me gusta este tipo de menú, es muy sencillo, elegante y discreto.
    Gracias

    ResponderEliminar

Descripcion en imagenes con efecto deslizante usando css

Una forma de agregarle mas estilo a nuestras imágenes y hacer que nuestro blogs sea mas profesional, es poniendo una pequeña descripc...