Sencillo menú multinivel drop down horizontal con jQuery


En un post anterior vimos cómo crear un menú vertical multinivel con jQuery y estaba pendiente hacer lo mismo, pero con un menú horizontal.
El menú que les enseñaré es bastante sencillo de implementar (lo ideal es hacerlo debajo de la cabecera) y tiene un efecto bastante bonito y elegante al momento de desplegarse.

( DEMO)
Pasar el cursor sobre la Pestaña 2 y Nivel 2.2

1.§ Vamos a Plantilla - Edición de HTML; si usamos a antigua interfaz de Blogger, vamos a Diseño - Edición de HTML.

2.§ Como este menú funciona con jQuery, agregaremos dicha librería a nuestra plantilla. Si ya la tenemos, no será necesario agregarla nuevamente. Si no la tenemos, entonces haremos lo siguiente: buscamos la etiqueta </head> y antes de éste, pegamos el siguiente código:
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'/>

3.§ Debajo del código anterior, pegaremos el script correspondiente para este menú:
<script type='text/javascript'>
$(document).ready(function(){
$('#fmtd li').hover(function (){
$(this).addClass('selected'); $(this).find('ul:first').slideDown();},
function (){$(this).removeClass('selected'); $(this).find('ul.fmtdDrpDwn').hide()});
$('.fmtdDrpDwn li').hover(function (){
$(this).find('ul:first').show('slide', {direction: 'left'}, 10000);},
function (){$(this).find('ul').hide()});
});
</script>

4.§ Ahora agregaremos los estilos encima de ]]></b:skin>.
Los estilos podemos modificarlos a gusto. El color que puse al menú es uno celeste, pero pueden cambiarlo por cualquier otro color:
#fmtd-left{
width:4px;
height:33px;
float:left;}
#fmtd-right{
width:4px;
height:33px;
float:left;}
#fmtd {
width:692px;
height:33px;
background:#91d8f0;
float:left;}
#fmtd ul {
margin:0px;
padding:0px;
list-style:none;}
#fmtd ul li {
float:left;
position: relative;
width:90px;
text-align:center;
margin:0 1px;}
#fmtd ul li ul {
display:none ;}
#fmtd ul li a {
font-family:Tahoma;
text-decoration:none;
color:#FFFFFF;
display:block;
font-size:12px;
font-weight:bold;}
#fmtd ul li a span {
display:block;
height:33px;
line-height:33px;}
#fmtd ul li a:hover {
color:#e8fffa;
font-weight:bold;}
#fmtd ul li.selected {
color:#FFFFFF;
font-weight:bold;
-moz-box-shadow:2px 2px 5px #d6d6d6;
-webkit-box-shadow:2px 2px 5px #d6d6d6;
box-shadow:2px 2px 5px #d6d6d6; }
#fmtd ul li.selected a {
color:#fff;}
#fmtd ul li ul.fmtdDrpDwn, #fmtd ul li ul.fmtdDrpDwn ul {
position:absolute;
left:0; top:33px;
background-color:#fefefe;
border: solid 1px #c8c8c8;
width:190px;
-moz-box-shadow:2px 2px 5px #d6d6d6;
-webkit-box-shadow:2px 2px 5px #d6d6d6;
box-shadow:2px 2px 5px #d6d6d6;}
#fmtd ul li ul.fmtdDrpDwn li, #fmtd ul li ul.fmtdDrpDwn ul li{
text-align:left;
float:none;
display:block;
width:189px;}
#fmtd ul li ul.fmtdDrpDwn li a {
font:normal 11px 'Tahoma', Arial, Helvetica, sans-serif;
color:#767676;
display:block;
height:23px;
line-height:23px;
display:block;
text-indent:15px;}
#fmtd ul li ul.fmtdDrpDwn li a:hover {
font-weight:bold;
background:#ddecf3;
color:#fff;
border:dotted 1px #a8d8eb;}
#fmtd ul li ul.fmtdDrpDwn li.selected {
background:#ddecf3;
font-weight:bold;
-moz-box-shadow:none;
-webkit-box-shadow:none;
box-shadow:none;}
#fmtd ul li ul.fmtdDrpDwn li.selected > a{
color:#333333;
font-weight:bold;
border:dotted 1px #a8d8eb;}
#fmtd ul li ul.fmtdDrpDwn ul {
position:absolute;
left:100%;
top:0px;}

5.§ Finalmente, para agregar el menú, armaremos la siguiente estructura HTML. Podemos agregar o quitar niveles a gusto:
<div id="main">
<div id="fmtd-left">
</div>
<div id="fmtd">
<ul>
<li ><a href="#"><span>Pestaña 1</span></a></li>
<li class=""><a href="#"><span>Pestaña 2</span></a>
<ul class="fmtdDrpDwn"><li><a href="#">Nivel 2.1</a></li>
<li><a href="#">Nivel 2.2</a>
<ul>
<li><a href="#">Nivel 2.1.1</a></li>
<li><a href="#">Nivel 2.1.2</a></li>
<li><a href="#">Nivel 2.1.3</a></li>
</ul></li>
<li><a href="#">Nivel 2.3</a></li>
</ul></li>
<li><a href="#"><span>Pestaña 3</span></a></li>
<li><a href="#"><span>Pestaña 4</span></a></li>
<li><a href="#"><span>Pestaña 5</span></a></li>
</ul>
</div>
<div id="fmtd-left">
</div>
</div>

- Para agregar una nueva pestaña, agregaremos lo siguiente antes de la última </ul>:
<li><a href="#"><span>Pestaña 6</span></a></li>
- Si queremos agregar una pestaña con niveles interiores, agregamos lo siguiente, siempre antes de la última </ul> :
<li class=""><a href="#"><span>Pestaña 6</span></a>
<ul class="fmtdDrpDwn"><li><a href="#">Nivel 6.1</a></li>
<li><a href="#">Nivel 6.2</a>
<ul>
<li><a href="#">Nivel 6.2.1</a></li>
<li><a href="#">Nivel 6.2.2</a></li>
<li><a href="#">Nivel 6.2.3</a></li>
</ul></li>
<li><a href="#">Nivel 6.3</a></li>
</ul></li>

Damos clic a guardar y listo.

8 opinaron:

squirrel

Una pregunta. Puedo puedo cambiarle el tipo de fuente.
Gracias por el menú. Está muy bueno

Jéssica YK

» squirrel:
Sí puedes cambiarle el tipo de fuente. Donde dice font-family:Tahoma; reemplaza Tahoma por la fuente que quieras usar.

S@lu2

Responder
Genial

Muye bueno. Excelente menú

Jéssica YK

» Genial:
Me alegra que te haya gustado el menú.

S@lu2

Responder
cjlm

No me funciona :( podrías por favor subir un html y un css solo con el menu ? gracias.

Responder
cjlm

Hola... algo no me funciona bien, intento hacer un html solo con el menú pero no lo consigo, no bajan los menus cuando me ubico sobre las pestañas. Podrías subir un html y un css solo con el menú de la demo ? gracias mil.

Responder
Antonio José Palacios Alvarez

Gran tutorial. Desgraciadamente no me funciona del todo bien y creo que puede ser porque estoy usando una plantilla de blogger. Mira en mi blog como se me queda el menu:

http://ajpadel.blogspot.com.es/

Aparece en vertical...¿sabes donde puede estar el error?

Muchas gracias!

Responder
Emi Miliani Romane

Hola el menu me ha salido perfecto solo tengo dos preguntas:

La primera y más importante : ¿Como hago para alinear el menu a la altura de mi portada asi como la tienes tu?

Segundo: ¿Como cambio el ancho de las pestañas?

Responder

Por favor, trata de tener habilitado tu perfil (has click en "Comenta con el antiguo editor" para iniciar sesión) o deja un enlace a tu blog escogiendo la opción "Nombre/URL", procura no dejar comentarios Anónimos.
Nota: Si es que se presenta algún problema con el formulario de comentarios, sólo has click en "Comenta con el antiguo editor"

Gracias por participar en el blog.

inicio