Menú horizontal drop and down con CSS

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 {
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 */
}
Por último entra en Diseño | Elementos de la página | Añadir un gadget | HTML/Javascript y ahí pega esto:

<div id="menu">
<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>
Cambia la URL del enlace donde se indica así como el nombre de la pestaña y de las subpestañas.

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>
<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>
Como puedes darte cuenta es un menú simple, elegante y fácil de personalizar que no requiere nada más que CSS.

Fuente: ciudadblogger

0 comentarios:

Publicar un comentario

Publicaciones recientes

 

  © 2009 Crea tu Blog

True Contemplation Blogger Template by M Shodiq Mustika