Menú horizontal con efecto deslizante (actualizado)

El menú horizontal con efecto deslizante, es un menú de subpestañas hecho con jQuery el cual despliega sus subpestañas con un deslizado suave, y aunque se publicó hace ya bastante tiempo, es uno de los menús de aquí que he visto que usan mucho, pues es un menú que se adapta a muchos estilos de plantilla.

Sin embargo, algunos batallan cuando quieren personalizarlo, y es que al estar alojados en un hosting tanto el script como los estilos CSS, hace que se complique para algunos poder hacerle cambios para darle ese toque personalizado.

Así que en esta entrada veremos el mismo menú, pero, esta vez no alojaremos ni el script ni los estilos en ningún servidor, todo estará dentro de la plantilla para que sea mucho más fácil hacerle cambios, además usaremos una versión más reciente de jQuery, y como pilón, ya tiene los cambios para que puedan usarlo junto con Scriptaculous y Prototype sin ningún problema.

El menú en cuestión es el siguiente:

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

ATENCIÓN: Si usas una plantilla hecha a través del Diseñador de plantillas de Blogger primero necesitas seguir los pasos de esta entrada.

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/AVvXsEhw-KHM-GIrooKm9FUIvWHhVDoJr1zbHKaLuFpi1KOUQYyYOYkLETbBiO-u-hzbEpm-ZZ0BCNb_TK4RoiCENJ-z3wVhKVk6Orb2-cQD9gCbzMefv8ixAVGX6KRRPmr1BD16XoDYbRo4lWIz/', 23], right:['rightarrowclass', 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhsMTnS_7byFlADrrY8hZyf7_98VKDXhIQMO85UC4Zms5NdCe_fDL5v0ufi3AY07OdwXJIb37s-e0T70J2ElFxrxcS_KW1sv5Q4SEBYyERcN8gH4H9I8U3HmqlojPX4j1FnORDS0hUeTEMT/']}

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>

Añade las URLs de los enlaces y los nombres de las pestañas donde se indica y listo.
En color verde se señalan las áreas que pueden personalizarse, como el color de fondo, el color de los enlaces, etc.
Las flechas de las subpestañas son imágenes y pueden cambiarse en el primer código, reemplazando las URLs en color naranja.

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. Imprimir artículo