Menú horizontal con efecto deslizante (actualizado)

Bien, empecemos a colocar este menú horizontal con subpestañas y efecto deslizante en el blog.


Para comenzar vamos a entrar a la Edición de HTML y agregamos antes de </head> los scripts:

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js' type='text/javascript'/>

<script type='text/javascript'>
//<![CDATA[
// jQuery Multi Level CSS Menu #2- By Dynamic Drive: http://www.dynamicdrive.com/
jQuery.noConflict();
var arrowimages={down:['downarrowclass', 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhtMZ9TUiA0_KpIhJvJULRwNwgjHFH7tsMKnMrQTc6zxYZaMhHNNZoAtuOEJq694xxsXxZ8d6F98vXNf1kD7niPRsmZkmw7Vc0ljaim2qENnk3WXFFdHBdZekpkmhJHfw4XdTCpMJQ0y8ku/', 23], right:['rightarrowclass', 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiG7VtVFXGi8LrfM6M3z9Vu1ldJmhCoYLuXhOJ_Wy04iyxrLAVZATEbcV7yVxY8yqMCQb4bP82QHZ2gMVam4w4x3ay8VpSGsWxLwbcWyQm-aYFv0ZiDVKE1QYY0EUQ7SiOApA_pWWQCvgU1/']}

var jqueryslidemenu={
animateduration: {over: 200, out: 100},
buildmenu:function(menuid, arrowsvar){
jQuery(document).ready(function(jQuery){
var jQuerymainmenu=jQuery("#"+menuid+">ul")
var jQueryheaders=jQuerymainmenu.find("ul").parent()
jQueryheaders.each(function(i){
var jQuerycurobj=jQuery(this)
var jQuerysubul=jQuery(this).find('ul:eq(0)')
this._dimensions={w:this.offsetWidth, h:this.offsetHeight, subulw:jQuerysubul.outerWidth(), subulh:jQuerysubul.outerHeight()}
this.istopheader=jQuerycurobj.parents("ul").length==1? true : false
jQuerysubul.css({top:this.istopheader? this._dimensions.h+"px" : 0})
jQuerycurobj.children("a:eq(0)").css(this.istopheader? {paddingRight: arrowsvar.down[2]} : {}).append(
'<img src="'+ (this.istopheader? arrowsvar.down[1] : arrowsvar.right[1])
+'" class="' + (this.istopheader? arrowsvar.down[0] : arrowsvar.right[0])
+ '" style="border:0;" />')
jQuerycurobj.hover(function(e){
var jQuerytargetul=jQuery(this).children("ul:eq(0)")
this._offsets={left:jQuery(this).offset().left, top:jQuery(this).offset().top}
var menuleft=this.istopheader? 0 : this._dimensions.w
menuleft=(this._offsets.left+menuleft+this._dimensions.subulw>jQuery(window).width())? (this.istopheader? -this._dimensions.subulw+this._dimensions.w : -this._dimensions.w) : menuleft
if (jQuerytargetul.queue().length<=1)
jQuerytargetul.css({left:menuleft+"px", width:this._dimensions.subulw+'px'}).slideDown(jqueryslidemenu.animateduration.over)},
function(e){
var
jQuerytargetul=jQuery(this).children("ul:eq(0)")
jQuerytargetul.slideUp(jqueryslidemenu.animateduration.out)})})
jQuerymainmenu.find("ul").css({display:'none', visibility:'visible'})})}}
jqueryslidemenu.buildmenu("myslidemenu", arrowimages)
//]]>
</script>

Luego, antes de ]]></b:skin> pega los estilos:

/* Menú horizontal deslizante
----------------------------------------------- */
.jqueryslidemenu{
background: #414141; /* Color de fondo del menú */
width: 100%;
font-weight: bold;
font-size: 12px; /* Tamaño de la letra */
font-family: Verdana; /* Tipo de letra */
}

.jqueryslidemenu ul{
margin: 0;
padding: 0;
list-style-type: none;
}

.jqueryslidemenu ul li {
position: relative;
display: inline;
float: left;
}

.jqueryslidemenu ul li a {
display: block;
background: #414141; /* Color de las pestañas */
padding: 8px 10px;
border-right: 1px solid #778; /* Color del borde que separa las pestañas */
text-decoration: none;
}

* html .jqueryslidemenu ul li a {
display: inline-block;
}

.jqueryslidemenu ul li a:link, .jqueryslidemenu ul li a:visited {
color: #FFF; /* Color del texto */
}

.jqueryslidemenu ul li a:hover {
background: #000; /* Color de la pestaña al pasar el cursor */
color: #FFF; /* Color del texto al pasar el cursor */
}

.jqueryslidemenu ul li ul{
position: absolute;
left: 0;
display: block;
visibility: hidden;
}

.jqueryslidemenu ul li ul li {
display: list-item;
float: none;
}

.jqueryslidemenu ul li ul li ul {
top: 0;
}

.jqueryslidemenu ul li ul li a {
font: normal 13px Verdana;
width: 160px; /* Ancho de las subpestañas */
padding: 5px;
margin: 0;
border-top-width: 0;
border-bottom: 1px solid gray;
}

.downarrowclass{
position: absolute;
top: 12px;
right: 7px;
}

.rightarrowclass{
position: absolute;
top: 6px;
right: 5px;
}

Por último entra en Diseño | Elementos de la página | Añadir un gadget | HTML/Javascript, o si usas la nueva interfaz entra en Diseño | Añadir un gadget | HTML/Javascript. Ahí pega la estructura del menú:

<div class="jqueryslidemenu" id="myslidemenu">
<ul>
<li><a href="URL del enlace">Pestaña 1</a></li>
<li><a href="URL del enlace">Pestaña 2</a></li>
<li><a href="#">Pestaña 3</a>
<ul>
<li><a href="URL del enlace">Sub 3.1</a></li>
<li><a href="URL del enlace">Sub 3.2</a>
<ul>
<li><a href="URL del enlace">Sub 3.2.1</a></li>
<li><a href="URL del enlace">Sub 3.2.2</a></li>
<li><a href="URL del enlace">Sub 3.2.3</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="URL del enlace">Pestaña 4</a></li>
<li><a href="#">Pestaña 5</a>
<ul>
<li><a href="URL del enlace">Sub 5.1</a></li>
<li><a href="URL del enlace">Sub 5.2</a></li>
<li><a href="URL del enlace">Sub 5.3</a></li>
<li><a href="URL del enlace">Sub 5.4</a></li>
</ul>
</li>
<li><a href="URL del enlace">Pestaña 6</a></li>

</ul>

<br style='clear: left'/>
</div>

Si quisieras añadir otra pestaña sólo agrega antes del último </ul> una línea como esta:

<li><a href="URL del enlace">Otra Pestaña</a></li>

Si quisieras agregar otra pestaña que contenga subpestañas entonces agrega igual antes de </ul> este código:

<li><a href="#">Otra pestaña</a>
<ul>
<li><a href="URL del enlace">Subpestaña 1</a></li>
<li><a href="URL del enlace">Subpestaña 2</a></li>
<li><a href="URL del enlace">Subpestaña 3</a></li>
</ul>
</li>

Y ahora sí, quienes usan este menú o quienes quieran usarlo ya no se complicarán para poder personalizar sus colores pues todo se podrá hacerse directo desde la plantilla sin necesidad de alojar nada en ninguna parte.

Este menú usa jQuery, así que si ya tienes jQuery en tu plantilla recuerda dejar sólo la versión más reciente y/o la que sea compatible con todas las aplicaciones que uses.