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.