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.
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.
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.
