Menú vertical multinivel con jQuery


Hoy vamos a ver cómo hacer un sencillo menú multinivel usando jquery, html y css. Este menú es bastante sencillo de implementar y de personalizar.

( DEMO)
Pasar el cursor sobre la Pestaña 3

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

2.§ Lo que haremos será agregar la libreria jQuery, claro que si ya la tenemos en nuestra plantilla 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 siguiente script:
<script type='text/javascript'>
$(document).ready(function(){
$('#fmt li').hover(function (){
$(this).addClass('selected'); $(this).find('ul:first').slideDown();},
function (){$(this).removeClass('selected'); $(this).find('ul.fmtDrpDwn').hide()});
$('.fmtDrpDwn li').hover(function (){
$(this).find('ul:first').show('slide', {direction: 'left'}, 10000);},
function (){$(this).find('ul').hide()});
});
</script>

4.§ Ahora agregaremos los estilos CSS encima de ]]></b:skin>. Estos estilos podemos modificarlos a nuestro gusto, cambiando los colores, tamaño de fuente,etc. :
#main{width:190px; height:auto; margin:0;}
#fmt {width:auto; height:auto;background:#e2e2e2; padding-top:12px; margin-left:20px; border:1px solid #666666;-moz-box-shadow:2px 2px 5px #d1d1d1; -webkit-box-shadow:2px 2px 5px #d1d1d1; box-shadow:2px 2px 5px #d1d1d1;}
#fmt ul {margin:0px; padding:0px; list-style:none;}
#fmt ul li {position: relative; width:auto; text-align:left; margin:0 0px; }
#fmt ul li ul { display:none ;}
#fmt ul li a { font-family:Tahoma;text-decoration:none;color:#636363; display:block; font-size:12px;}
#fmt ul li a span {display:block; height:31px; line-height:31px;padding-left:20px;}
#fmt ul li a:hover {background:; color:#e8fffa; font-weight:bold;}
#fmt ul li a.active span, #fmt ul li a.active:hover { background:#FAC61C!important; color:#fff; font-weight:bold; height:31px; line-height:31px; }
#fmt ul li.selected { background: #FAC61C; color:#FFFFFF; font-weight:bold; }
#fmt ul li.selected a { color:#fff;}
#fmt ul li ul.fmtDrpDwn, #fmt ul li ul.fmtDrpDwn ul { position:absolute; left:168px; top:0; background:#FAC61C; width:185px; -moz-box-shadow:2px 2px 5px #d1d1d1; -webkit-box-shadow:2px 2px 5px #d1d1d1; box-shadow:2px 2px 5px #d1d1d1; padding-left:2px; border-top:solid 2px #fbc67a;}
#fmt ul li ul.fmtDrpDwn li, #fmt ul li ul.fmtDrpDwn ul li{ text-align:left; float:none; display:block; width:183px;}
#fmt ul li ul.fmtDrpDwn li a { font:normal 11px 'Tahoma', Arial, Helvetica, sans-serif; color:#fff; display:block; height:23px; line-height:23px; display:block; text-indent:15px;}
#fmt ul li ul.fmtDrpDwn li a:hover { font-weight:bold; background:#f47d12;}
#fmt ul li ul.fmtDrpDwn li.selected {background:#f47d12; font-weight:bold; -moz-box-shadow:none; -webkit-box-shadow:none;box-shadow:none;}
#fmt ul li ul.fmtDrpDwn ul { position:absolute; left:100%; top:0px; }

5.§ Finalmente, para agregar el menú, armaremos el siguiente HTML en el lugar donde queramos agregarlo (como es un menú vertical, tendría que ser dentro de un gadget, en la sidebar). Si queremos, también podemos quitar niveles :
<div id="main">
<div id="fmt">
<ul>
<li ><a href="#"class="active"><span>Pestaña 1</span></a></li>
<li class=""><a href="#"><span>Pestaña 2</span></a></li>
<li><a href="#"><span>Pestaña 3</span></a>
<ul class="fmtDrpDwn">
<li><a href="#">Nivel 3.1</a></li>
<li><a href="#">Nivel 3.2</a>
<ul>
<li><a href="#">Nivel 3.2.1</a></li>
<li><a href="#">Nivel 3.2.2</a>
</li></ul></li>
<li><a href="#">Nivel 3.3</a></li>
<li><a href="#">Nivel 3.4</a></li></ul>
<li><a href="#"><span>Pestaña 4</span></a></li>
<li><a href="#"><span>Pestaña 5</span></a></li>
<li><a href="#"><span>Pestaña 6</span></a></li>
<li><a href="#"><span>Pestaña 7</span></a></li>
</ul>
</div>
</div>

- Para agregar una nueva pestaña, agregaremos lo siguiente antes de la </ul> que está en negrita:
<li><a href="#"><span>Pestaña 8</span></a></li>

- Si queremos agregar una pestaña con niveles interiores, tendríamos que agregar lo siguiente, siempre antes de la última </ul> :
<li><a href="#"><span>Pestaña 8</span></a>
<ul class="fmtDrpDwn">
<li><a href="#">Nivel 8.1</a></li>
<li><a href="#">Nivel 8.2</a>
<ul>
<li><a href="#">Nivel 8.2.1</a></li>
<li><a href="#">Nivel 8.2.2</a>
</li></ul></li>
<li><a href="#">Nivel 8.3</a></li>
<li><a href="#">Nivel 8.4</a></li></ul>

En un próximo tutorial, veremos cómo hacer un menú multinivel, pero horizontal.

8 opinaron:

Unknown

Aún no he probado nada con la librería, poco tiempo tesoro. Que te encuentres bien, besos :)

Jéssica YK

» Graciela:
No te preocupes, te entiendo. Yo también he estado algo ocupada y por eso no he publicado mucho. Cuando puedas probar este tutorial, me dices para ver qué tal te fue.

S@lu2

Responder
Biblioteca Nacional Luis Cardoza y Aragón

Maravilloso!...Me encantó el recurso y me ha servido tremendamente!...Infinitas gracias, te lo agradezco con todo el corazón. ;)

Jéssica YK

» Biblioteca Nacional Luis Cardoza y Aragón:
Me alegra que el post te haya sido de ayuda!

S@lu2

Responder
Unknown
Este comentario ha sido eliminado por el autor.
Responder
Unknown
Este comentario ha sido eliminado por el autor.
Responder
AGROCITY

como puedo hacer para que los sub-menues no se solapen??al pasar rapado se sobreponen los menus

Responder
AMAZING MATHS

Hola Yéssica:
He seguido todos los pasos pero todos los niveles y las pestañas se quedan uno debajo del otro y no como en el demo a la derecha.
¿Cómo puedo arreglarlo?
Gracias

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