Caja de información animada con jQuery

En varias oportunidades escribí sobre implementaciones con jQuery de pestañas y contenido animado. Esta vez les presento un tutorial de una caja de información animada, también haciendo uso de jQuery; se trata de jQuery Animated Information Box publicado por electrictoolbox.com.

Esta implementación consiste en unas pestañas o menú lateral que van mostrando contenido que desplaza suavemente al hacer clic o pasar el mouse sobre dichas pestañas.

Implementación

Para comenzar necesitamos escribir un código HTML que será la estructura principal de nuestra implementación:

<div id="example-links">
 <a href="#">Example 1</a>
 <a href="#">Example 2</a>
 <a href="#">Example 3</a>
 <a href="#">Example 4</a>
 <a href="#">Example 5</a>
</div>
<div id="example-content-container">
 <div id="example-content">
 <div><b>Example content 1</b><br />Lorem ipsum dolor sit amet.</div>
 <div><b>Example content 2</b><br />Vestibulum erat wisi.</div>
 <div><b>Example content 3</b><br />Pellentesque habitant morbi.</div>
 <div><b>Example content 4</b><br />Proin pretium purus ac ligula.</div>
 <div><b>Example content 5</b><br />Ut nisi lacus, mollis id convallis.</div>
 </div>
</div>
<div style="clear:both"></div>

Los enlaces del primer DIV son el menú o las pestañas, los dos DIV ‘contenedores’ son la información que se muestra a seleccionar una opción del menú.

El código jQuery con el que implementamos las funcionalidad es el siguiente:

$('#example-links a').click(function(){
    var index = $("#example-links a").index(this);
    $('#example-content').animate({"marginTop" : -index*220 + "px"}); // multiply by height+top/bottom padding/margin/border
    return false;
});

En el ejemplo retorna un valor Falso para prevenir el clic sobre el enlace.

Una variación es que podemos hacer que funcione cuando se pasamos el puntero del mouse por encima:

$('#example-links a').hover(function(){
    var index = $("#example-links a").index(this);
    $('#example-content').animate({"marginTop" : -index*220 + "px"}); // multiply by height+top/bottom padding/margin/border
});

Por el último necesitamos el código CSS que le da el estilo:

#example-links {
    border: 1px solid #ccc;
    border-bottom: none;
    float: left;
    width: 200px;
}
#example-links a {
    border-bottom: 1px solid #ccc;
    display: block;
    font-size: 17px;
    height: 39px;
    line-height: 39px;
    padding-left: 10px;
}
#example-links a:focus {
    outline: 0;
}
#example-links a:hover {
    background-color: #ddd;
}
#example-content-container {
    border: 1px solid #ccc;
    border-left: none;
    height: 200px;
    overflow: hidden;
    width: 350px;
}
#example-content div {
    height: 200px;
    padding: 10px;
}

Como se ve en este ejemplo, es muy sencillo de implementar y adaptar, logrando muy fácilmente un vistoso y agradable efecto visual.