Anteriormente, vimos como crear un menú estático, ahora crearemos un menú desplegable:
Paso 1: Añadir un nuevo gadget
- Ve a Diseño
- Añades un nuevo gadget en la zona de Cross-column
- Selecciona la opción: HTML/JavaScript - Añade funciones de terceros u otro código a tu blog.
Paso 2: Configuración menú
- En la parte del código escribe esto:
- Modifica '#' por la dirección a la que quieres enlazar y el nombre de cada enlace
- Por último queda asignar los colores y el despliegue del menú cuando se pase el cursor por encima. Esto se hace con el siguiente texto, que se coloca debajo de la lista del menú, en el mismo sitio.
<ul id="ybmenud">
<li><a href="#">Inicio</a></li>
<li><a href=“#”>Menú 1</a>
<ul>
<li><a href="#">Submenú 1.1</a></li>
<li><a href="#">Submenú 1.2</a></li>
<li><a href="#">Submenú 1.3</a></li>
</ul>
</li>
<li><a href=“#”>Menú 2</a>
<ul>
<li><a href="#">Submenú 2.1</a></li>
<li><a href="#">Submenú 2.2</a></li>
<li><a href="#">Submenú 2.3</a></li>
</ul>
</li>
<li><a href="#">Sobre mí</a></li>
</ul>
<style type="text/css">
.tabs-inner .widget ul#ybmenud {
text-align: left;
display: inline;
margin: 0;
padding: 15px 4px 17px 0; /* espacio de padding de los botones del menú */
list-style: none;
border:none;
}
.tabs-inner .widget ul#ybmenud li {
text-shadow: 0 -1px 0 #000;
color: #ffffff;
display: inline-block;
margin-right: -4px;
position: relative;
padding: 15px 20px;
background: #b4a2b6; /* color de fondo de tu menu */
float:none;
cursor: pointer;
-webkit-transition: all 0.2s;
-moz-transition: all 0.2s;
-ms-transition: all 0.2s;
-o-transition: all 0.2s;
transition: all 0.2s;
}
.tabs-inner .widget ul#ybmenud li a {
padding:0;
background: transparent;
border:0;
}
.tabs-inner .widget ul#ybmenud li:hover {
background: #fc867e; /* color de fondo para cuando pasas el ratón por encima del botón de la barra */
}
.tabs-inner .widget ul#ybmenud li:hover a {
background: transparent;
}
.tabs-inner .widget ul#ybmenud li ul {
z-index:1000;
border:none;
padding: 0;
position: absolute;
top: 45px;
left: 30px;
float:none;
width: 150px;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
display: none;
opacity: 0;
visibility: hidden;
-webkit-transiton: opacity 0.2s;
-moz-transition: opacity 0.2s;
-ms-transition: opacity 0.2s;
-o-transition: opacity 0.2s;
-transition: opacity 0.2s;
}
.tabs-inner .widget ul#ybmenud li ul li {
background: #fc867e; /* color del fondo de las pestañas del sub-menu */
display: block;
text-shadow: 0 -1px 0 #000;
}
ul#ybmenud li ul li a{
background: transparent;
}
.tabs-inner .widget ul#ybmenud li ul li:hover {
background: #b4a2b6; /* color de fondo cuando pasas el ratón sobre el sub menu */
}
.tabs-inner .widget ul#ybmenud li:hover ul {
display: block;
opacity: 1;
visibility: visible;
}
</style>
¡Listo!
Si quieres leer más tips
No hay comentarios:
Publicar un comentario