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.
jQuery Animated Information Box
Sitio: www.electrictoolbox.com/jquery-animated-information-box