Menú horizotal con efecto deslizante en Javascript 1kb

Creado por leigeber, este menú horizontal trae un efecto deslizante lo que lo hace muy elegante , pero no por eso se dificulta su instalación, la misma es muy sencilla y no difiere mucho a otros menúes comunes horizontales.

Para instalarlo, lo primero que tenemos que hacer es bajar el archivo ZIP de la página del autor. Una vez bajado nos encontraremos con dos demos, el Script y las correspondientes hojas de estilo, además de un una carpeta con la imágenes.

Lo pueden ver en funcionamiento en blogger en este blog de pruebas.

Cómo instalar el menú deslizante en blogger?

Vamos a Editar Plantilla, y justo antes de </head>: pegamos el código del Script:

<script type='text/javascript'>
//<![CDATA[
var menuSlider=function(){
var m,e,g,s,q,i; e=[]; q=8; i=8;
return{
init:function(j,k){
m=document.getElementById(j); e=m.getElementsByTagName('li');
var i,l,w,p; i=0; l=e.length;
for(i;i<l;i++){
var c,v; c=e[i]; v=c.value; if(v==1){s=c; w=c.offsetWidth; p=c.offsetLeft}
c.onmouseover=function(){menuSlider.mo(this)}; c.onmouseout=function(){menuSlider.mo(s)};
}
g=document.getElementById(k); g.style.width=w+'px'; g.style.left=p+'px';
},
mo:function(d){
clearInterval(m.tm);
var el,ew; el=parseInt(d.offsetLeft); ew=parseInt(d.offsetWidth);
m.tm=setInterval(function(){menuSlider.mv(el,ew)},i);
},
mv:function(el,ew){
var l,w; l=parseInt(g.offsetLeft); w=parseInt(g.offsetWidth);
if(l!=el||w!=ew){
if(l!=el){var ld,lr,li; ld=(l>el)?-1:1; lr=Math.abs(el-l); li=(lr<q)?ld*lr:ld*q; g.style.left=(l+li)+'px'}
if(w!=ew){var wd,wr,wi; wd=(w>ew)?-1:1; wr=Math.abs(ew-w); wi=(wr<q)?wd*wr:wd*q; g.style.width=(w+wi)+'px'}
}else{clearInterval(m.tm)}
}};}();
//]]>
</script>

Luego, buscamos ]]></b:skin> y justo arriba de este código agregamos los estilos:


.menu {
margin: 5px;
position:relative;
background:#4B4B4B;
height:38px;
font:13px Helvetica, sans-serif; font-weight:bold;
}
.menu ul {
height:38px;
list-style:none;
position:absolute;
z-index:100;
padding: 0 0 0 10px;
}
.menu li {
float:left;
}
.menu a, .menu a:active, .menu a:visited, .menu a:hover {
text-decoration:none;
color:#FFF;
padding:10px
}
#slide {
position:absolute;
top:6px;
height:26px;
background:#0099CC;
z-index:10
}

Este cógido es el que usé para el blog de pruebas, pueden usar el de la demo del autor que viene en el archivo zip, o modificarlo para adaptarlo a los colores de su plantilla.

El último paso, es colocar el código del menú y su lista, se puede instalar como un elemento HTML, o colocarlo dentro de la plantilla, en ambos casos el código a utilizar es el siguiente:

<div class="menu">
<ul id="menu">
<li><a href="#">JavaScript</a></li>
<li><a href="#">Graphic Design</a></li>
<li><a href="#">HTML</a></li>
<li value="1"><a href="#">User Interface</a></li>
<li><a href="#">CSS</a></li>
</ul>
<div id="slide"></div>
</div>
<script type='text/javascript'>window.onload=function() {menuSlider.init(&#39;menu&#39;,&#39;slide&#39;);}</script>

Este sería el último paso, el menú con efecto deslizante ya debería estar funcionando, solo nos queda editar los enlaces, para lo cual reemplazamos el # por la dirección url que deseamos.

Como dije anteriormente, el último código puede ir dentro de la plantilla, para que quede como en el blog de pruebas pruebas, lo colocamos justo por arriba de <div id='main-wrapper'>.

Listo, el menú debería funcionar sin problemas.

Vía: leigeber.com