Animar secciones de navegación con jQuery y css

Después del menú, otra de las tareas mas comunes es la creacion de un bloque o conjunto de bloques informativos que a su vez hacen el rol de secciones de navegación, ya saben un simple preview de las categorías mas importante del website, por lo general son una mezcla de texto informativo, imagen referente y link de acceso. Y claro un buen diseño visual logra atencion por parte del usuario, pero no hay nada mejor que el movimiento para hacer que sus ojos se enfoquen en ésa seccion, y ya que por motivos de accesibilidad el flash no es una opción, pues habra que recurrir a una buena maquetacion xhtml para el seo y base de la estructura, un poco de css para el aspecto visual y algo de javascript para la animación.

Pues bien comenzamos definiendo las secciones, para éste caso tomaré como ejemplo práctico un estudio fotográfico que provee 4 servicios principales de fotografia (publicitaria, artística, tarjetas y retratos)

<div class="navegacion">
<div class="seccion publicitaria">
<div class="img">
<h2><a href="/servicios/fotografia-publicitaria">Publicitaria</a></h2>
</div>
<div class="txt">Lorem ipsum dolor sit amet.</div>
</div>
<div class="seccion artistica">
<div class="img">
<h2><a href="/servicios/fotografia-artistica">Artística</a></h2>
</div>
<div class="txt">Lorem ipsum dolor sit amet.</div>
</div>
<div class="seccion tarjetas">
<div class="img">
<h2><a href="/servicios/tarjetas">Tarjetas</a></h2>
</div>
<div class="txt">Lorem ipsum dolor sit amet.</div>
</div>
<div class="seccion retrato">
<div class="img">
<h2><a href="/servicios/fotografia-retrato">Retratos</a></h2>
</div>
<div class="txt">Lorem ipsum dolor sit amet.</div>
</div>
</div>

Al contendor le asignamos la clase "navegacion", a las secciones algo tan simple como lo que cada una es "seccion", luego algunas clases adicionales para tratarlas a cada una por separado(algo tan simple como su nombre en nuestro caso), luego aqui viene el truco para el efecto rollover, solo hay que definir dos bloques en el mismo nivel jerarquico uno para el estado normal y otro a mostrar cuando pase el mouse por encima, al primer bloque que es el que contendrála imagen le colocamos una clase tan simple como "img" (demasiado obvio no), dentro de el div anidamos un encabezado de segundo nivel(muy bueno para el seo y posicionamiento del url alli contenido), y dentro del encabezado el link de ley para que el buscador encuentre la pagina en mencion, ya habiendo terminado con el primer bloque iniciamos con el segundo(que en nuestro caso solo contendra texto, ya saben me gusta mostrarles lo basico y necesario para que luego puedan editarlo con facilidad) y le colocamos la clase "txt"(que simple, por eso amo el xhtml y css, me hace la vida tan fácil). Ya luego hacemos lo mismo con las demas secciones.

Bueno ya habiendo terminado con la maquetació, es hora de agregarle el estilo.

Primero eliminamos el margin y el padding del <h2> y estandarizamos algunas medidas(de yapa les pongo el css del body para la pagina de ejemplo).

body{
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
background:#000;
}

h2{
font-size:160%;
line-height:130%;
margin:0;
padding:0;
}

Luego definimos las dimensiones del contenedor, centramos y aplicamos un borde.

.navegacion{
margin:0px auto;
border:solid 1px #CCCCCC;
width:800px;
height:230px;
}

Ahora establecemos el ancho de nuestras secciones y las hacemos flotar a la izquierda.

.navegacion .seccion{
position:relative;
float:left;
width:25%;
}

Ahora nos aseguramos que el bloque de texto y el de la imagen se muestren comporten como bloques y esten posicionados relativamente a su nodo padre.

.navegacion .img, .navegacion .txt{
position:relative;
display:block;
}

Luego establecemos el alto del bloque de la imagen y su posicion en el eje z.

.navegacion .img{
z-index:3;
height:230px;
}

Despues hacemos uso de las clases particulares de cada uno de los bloques para colocarles las imagenes correspondientes.

.navegacion .publicitaria .img{ background: #FFFFFF url(publicitaria.jpg) center no-repeat; }
.navegacion .artistica .img{ background: #4675C5 url(artistica.jpg) left no-repeat; }
.navegacion .tarjetas .img{ background: #AA4400 url(tarjetas.jpg) center no-repeat; }
.navegacion .retrato .img{ background: #FFFFFF url(retratos.jpg) left no-repeat; }

Ahora establecemos las propiedades del segundo bloque, principalmente nos aseguramos que el ordenamiento en el eje z sea mayor que el del bloque anterior, que todo desbordamiento sea imperceptible y el alto con padding incluido sea 230px, los mismos que habra que aplicar como margen superior negativo para que los bloques se superpongan.

.navegacion .txt{
overflow:hidden;
height:210px;
cursor:pointer;
color:#FFF;
font-size:12px;
font-weight:bold;
line-height:150%;
padding:10px;
margin-top:-230px;
z-index:5;
opacity:0;
filter:alpha(opacity=0);
background-image:url(transparent.gif);
/*IE 6y7 necesitan un fondo para funcionar correctamente*/
}

Ya luego agregamos algunas lineas demas para cambiar el aspecto de los links.

.navegacion .seccion .img h2 a{
padding: 0 0 0 5px;
font-family: "Trebuchet MS";
font-style:italic;
color:#494949;
text-decoration:none;
}

Y otra pisca adicional para nuestro caso en el que el texto se pierde con la imagen.

.navegacion .artistica .img h2 a{
color:#CCCCCC;
} 

Ya habiendo terminado con el css es hora de echarle mano al javascript para agregar el efecto rollover y algo de funcionalidad.

Primero cargamos los scrips, iniciamos con el jquery y luego el nuestro que llame simplemente efectos.js

<script src="jquery.js" language="JavaScript" type="text/javascript"></script>
<script src="efectos.js" language="JavaScript" type="text/javascript"></script>

Ahora ya en nuestro documento javascript, es hora de hacer uso de la magica funcion ready() del jquery para agregar los eventos apenas cargue la página.

$(document).ready(function(){
var base_path = '/';
var links_servicios = ['servicios/fotografia-publicitaria', 'servicios/fotografia-artistica', 'servicios/tarjetas', 'servicios/fotografia-retrato'];
$('.navegacion .txt').each(function(i){
var bg = $('.navegacion .img').eq(i);
$(this).mouseover(function(){
$(this).fadeTo("slow", 1); 
bg.fadeTo("slow", 0.3);
});
$(this).mouseout(function(){
$(this).fadeTo("slow", 0);
bg.fadeTo("slow", 1);
});
$(this).click(function(){ location.href = base_path + links_servicios[i];	});
});
});

Cabe recalcar que la version de jQuery usada para éste ejemplo es la 1.0.4, pudiendo haber algunas diferencias con la versión actual. Dejando eso aclarado pasamos a definir la raiz del sitio, ésto se usara posteriormente para redireccionar la pagina cuando el usuario haga click en la seccion ya que el bloque de texto capturará los eventos sucedidos sobre él con lo cual el link agregado anteriormente quedará inservible para el usuario final (aunque muy útil para los buscadores), luego creamos un array que contenga las urls relativas a la raiz del website (si algo he aprendido en éstos años es que es mucho mas facil trabajar con urls relativas a la raiz del sitio). Luego usando selectores css capturamos los nodos contenedores del texto, hacemos un recorrido por el array con un each() capturando su indice para usarlo posteriormente, luego definimos como "bg" el nodo contenedor de la imagen correspondiente del item actual, y se agregan los eventos mouseover y mouseout para hacer un fadein y fadeout de los bloques.

Ya para finalizar se agrega el evento click para redireccionar al usuario a la pagina referente a cada bloque.

Y ahora al fin sin más preambulo les dejo el demo.