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:
Ahora en Diseño,ve a Añadir Gadget,HTML/Javascript y pega lo siguiente:
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.
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.
Me gusta este tipo de menú, es muy sencillo, elegante y discreto.
ResponderEliminarGracias