pro-Gramas tu biblioteca de programacion

Ahora les mostramos un menú en javascript que esta formado de pestañas y al presionar una de ellas el contenido cambia, dando la apariencia que jira. Este menú es un excelente recurso que no puede faltar en tu web.

El html utilizado es un conjunto de listas y div en donde se encuentra el contenido del menú. La lista ul clase ‘buttons’ es la mas importante, por que en ella se declaran los ítems o pestañas que tendrá el menú. Ten en cuenta que son enlaces, por lo que en la propiedad onclick mandamos llamar a la función change(x,this) a la que le pasamos dos parámetros, el primero es la distancia que tiene que recorrer el menú para colocarse en la pestaña señalada y la distancia que recorre en cada pestaña es el ancho del div contenedor en este caso 520 y el segundo es el item ala cual vamos.

<ul class="buttons">
    <li><a id="current" href="javascript:void(0)" onclick="change(0,this);">Lo m&aacute;s reciente</a></li>
    <li><a href="javascript:void(0)" onclick="change(520,this);">Sitios de inter&eacute;s</a></li>
    <li><a href="javascript:void(0)" onclick="change(1040,this);">Descargar</a></li>
    <li><a href="javascript:void(0)" onclick="change(1560,this);">Feedicons</a></li>
</ul>

Los div con clase ‘slide x’ (x = numero del item), son los que contienen el contenido de cada pestaña.
Y por ultimo el script que hace esta maravilla son las funciones siguientes:

  function change(x,item)
{
    document.getElementById("current").id = "";
    item.id = "current";
    if((x * (-1))<(getElementPosition("elementos").left - 10)){
        distance = (x + getElementPosition("elementos").left) / 5;
        start = getElementPosition("elementos").left;
        for(i=0; i<=distance; i++){
            setTimeout("document.getElementById("elementos").style.margin = "0 -" + ((start * (-1)) + (i*5)) + "px"", i*5);
            if(i==distance){
                setTimeout("document.getElementById("elementos").style.margin = "0 -" + x + "px"", i*5);
            }
        }
    }else if((x * (-1))>(getElementPosition("elementos").left)){
        distance = ((x + getElementPosition("elementos").left) / 5)  * (-1);
        start = getElementPosition("elementos").left;       
        for(i=0; i<=distance; i++){
            setTimeout("document.getElementById("elementos").style.margin = "0 -" + ((start * (-1)) - (i*5)) + "px"", i*5);
            if(i==distance)
                setTimeout("document.getElementById("elementos").style.margin = "0 -" + x + "px"", i*5);
        }
    }
}

function getElementPosition(object){
    var position = new Object;
    position.left = parseInt(document.getElementById(object).style.marginLeft)
    position.top = parseInt(document.getElementById(object).style.marginTop)
    return position;
}

Este tutorial se baso en Infected-FX, descarga el ejemplo abajo.