He visto que los menús con subpestañas (drop and down) son lo más solicitados y aunque el menú con efecto deslizante es del agrado de muchos no todos lo pueden usar debido a que requiere jQuery, así que veamos cómo hacer un menú drop and down sólo con CSS sin usar ningún tipo de script que pueda interferir con el funcionamiento del sitio Web.
En cuanto al diseño de estos menús las posibilidades son enormes, este me gusta por lo sencillo de su aspecto y lo adaptable que es con muchas plantillas aunque con las nuevas plantillas de Blogger no funciona pero bueno, ya hemos visto que casi nada funciona en esas plantillas...
Puedes ver el menú haciendo clik en el siguiente botón.
Para ponerlo en tu blog entra en Diseño | Edición de HTML y antes de ]]></b:skin> pega lo siguiente:
#menu ul {Por último entra en Diseño | Elementos de la página | Añadir un gadget | HTML/Javascript y ahí pega esto:
margin: 0;
padding: 0;
list-style: none;
}
#menu li {
float: left;
position: relative;
width: 140px; /* Ancho de las pestañas */
}
#menu li ul {
position: absolute;
display: block;
top: 2em;
left: 0;
}
#menu li>ul {
top: auto;
left: auto;
}
#menu li:hover ul { display: block; }
#menu li:hover>ul { visibility:visible; }
#menu ul ul { visibility:hidden; }
#menu ul, li { margin: 0 0 0 0; }
#menu ul a {
display: block;
text-decoration: none;
color: #777; /* Color del texto de las pestañas */
background: #f9f9f9; /* Color de fondo de las pestañas */
padding: 5px;
border: 1px solid #ccc; /* Borde de las pestañas */
text-align: center; /* Alineación del texto */
}
#menu ul a:hover {
color: #E2144A; /* Color del texto al pasar el cursor */
}
#menu li ul a {
text-align: left;
text-decoration: none;
color: #777; /* Color del texto de las subpestañas */
background: #fff; /* Color de fondo de las subpestañas */
border: 1px solid #ccc; /* Borde de las subpestañas */
padding: 5px;
}
#menu li ul a:hover {
color: #E2144A; /* Color del texto de las subpestañas al pasar el cursor */
background: #f9f9f9; /* Color de fondo de las subpestañas al pasar el cursor */
}
<div id="menu">Cambia la URL del enlace donde se indica así como el nombre de la pestaña y de las subpestañas.
<ul id="menuList">
<li><a class="submenu" href="URL del enlace">Pestaña 1</a></li>
<li><a class="submenu" href="URL del enlace">Pestaña 2</a>
<ul>
<li><a href="URL del enlace">Pestaña 2.1</a></li>
<li><a href="URL del enlace">Pestaña 2.2</a></li>
<li><a href="URL del enlace">Pestaña 2.3</a></li>
</ul>
</li>
<li><a class="submenu" href="URL del enlace">Pestaña 3</a>
<ul>
<li><a href="URL del enlace">Pestaña 3.1</a></li>
<li><a href="URL del enlace">Pestaña 3.2</a></li>
<li><a href="URL del enlace">Pestaña 3.3</a></li>
</ul>
</li>
<li><a class="submenu" href="URL del enlace">Pestaña 4</a>
<ul>
<li><a href="URL del enlace">Pestaña 4.1</a></li>
<li><a href="URL del enlace">Pestaña 4.2</a></li>
<li><a href="URL del enlace">Pestaña 4.3</a></li>
</ul>
</li>
</ul>
</div>
Si deseas agregar otra pestaña sólo agrega antes del </ul> de color azul otra línea como esta:
<li><a class="submenu" href="URL del enlace">Otra pestaña</a></li>Si deseas que la pestaña tenga subpestañas entonces agrega este código en lugar del otro:
<li><a class="submenu" href="URL del enlace">Otra pestaña</a>Como puedes darte cuenta es un menú simple, elegante y fácil de personalizar que no requiere nada más que CSS.
<ul>
<li><a href="URL del enlace">Pestaña 5.1</a></li>
<li><a href="URL del enlace">Pestaña 5.2</a></li>
<li><a href="URL del enlace">Pestaña 5.3</a></li>
</ul>
</li>
No hay comentarios:
Publicar un comentario