Menú desplegable animado con jQuery y CSS para Blogger

En esta oportunidad les mostraré un menú desplegable que he creado gracias a CSS y jQuery.

La novedad de este menú es que contiene una animación suave en los menús inferiores, y además es muy fácil de configurar.

Puedes ver un ejemplo del menú en la siguiente imagen:

El Tutorial:

Paso 1: Instalando el script:

En ''Diseño | Edición HTML'' buscaremos la siguiente sección:

</head>

Arriba de esta pega el siguiente código:

<script src='http://dl.dropbox.com/u/28164309/Ayuda%20Bloggers/Aportes/SLIDERS/jquery-1.6.2.min.js' type='text/javascript'/>
<script type="text/javascript">
function menudesplegable(){
$(" #menu-superior ul ").css({display: "none"});
$(" #menu-superior li").hover(function(){
$(this).find('ul:first:hidden').css({visibility: "visible",display: "none"}).slideDown(200);
},function(){
$(this).find('ul:first').slideUp(500);
});
}
$(document).ready(function(){
menudesplegable();
});
</script>

Edita los siguientes valores para aumentar o disminuir la velocidad de animación (En milisegundos):

• .slideDown(200) Corresponde a la animación al pasar el mouse.
• slideUp(500) Corresponde a la animación al ocultar el submenú.

Importante: Si ya tienes jQuery instalado en tu plantilla no hará falta la línea destacada.

Paso 2: Añadiendo los estilos:

Ahora deberás buscar la siguiente sección:

]]></b:skin>

Arriba de esta pega el siguiente código CSS:

#menu-desplegable { /*Menú General*/
font-family: Century Gothic, sans-serif;
height:40px;
width:600px;
margin:0px auto;
font-size:14px;
background: #1c1c1c url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjWpFAHmHGLP50Oa8HjXx2s04r-zKfOVsWvZEnJ4GeWNprZqt4y_XhIgi_oUpSZpCp_SLH4WNEKAerV_LnGXpOk3LbHQqmzOquoOziAdfjeqGdUFl0GmxXN28cw7IE_VRvI83toZJDIPpo/s1600/noise.png);
}
#menu-superior { /*Primer menú*/
list-style:none;
height:40px;
margin:0px auto;
overflow:hidden;
}
#menu-superior li { /*Cada elemento*/
float:left;
list-style:none;
}
#menu-superior li a { /*Enlace de cada elemento*/
display:block;
padding:9px 10px;
text-decoration:none;
color:#fff;
font-weight:normal;
}
#menu-superior li a:hover { /*Enlace de cada elemento al pasar el mouse*/
color:#ccc;
background: #CC0000;
}
#menu-superior ul.submenu { /*Submenu*/
border-color:none;
border-radius:10px;
padding:5px;
margin-top:-25px;
position:absolute;
list-style:none;
box-shadow:1px 1px 1px 1px #f5f5f5;
background: #f5f5f5;

}
#menu-superior ul.submenu li {  /*Elementos del submenu*/
float:none;
padding:2px;
width:200px;
margin:0px;
}
#menu-superior ul.submenu li a { /*Enlaces del submenu*/
color:#2d2d2d;
}
#menu-superior ul.submenu li a:hover { /*Enlaces del submenu al pasar el cursor*/
color:#ccc;
}

Puedes modificar los valores guiándote con los comentarios que he añadido en cada atributo.

Paso 3: Añadiendo el menú:

Ahora deberás buscar alguna sección en la que quieras incluir el menú, en ella deberás pegar el siguiente código:

<div id="menu-desplegable">
<ul id="menu-superior">
    <li><a href="#">Enlace 1</a></li>
    <li><a href="#">Enlace 2</a>
        <ul class="submenu">
            <li><a href="#">Enlace 1</a></li>
            <li><a href="#">Enlace 2</a></li>
            <li><a href="#">Enlace 3</a></li>
            <li><a href="#">Enlace 4</a></li>
        </ul>
    </li>
    <li><a href="#">Enlace 3</a></li>
    <li><a href="#">Enlace 4</a></li>
</ul>
</div>

Para crear otro submenú, pega antes del último </ul> el siguiente código:

<li><a href="#">Nuevo Menu</a>
<ul class="submenu">
<li><a href="#">Enlace 1</a></li>
<li><a href="#">Enlace 2</a></li>
<li><a href="#">Enlace 3</a></li>
<li><a href="#">Enlace 4</a></li>
</ul>
</li>

Previsualiza los cambios y si el resultado es satisfactorio guarda la plantilla.