Creación de un menú deslizante con imágenes incrustadas y submenú includo en el deslizante inferior.

Este es el menú que vamos a conseguir en versión reducida a cuatro elementos para visualizar en esta caja.

EL HTML

Para realizar la estructura HTML necesitamos crear una lista desordenada (UL) donde cada uno de los elementos contienen el link principal de cada item y un DIV para integrar un submenu:

<ul id="sdt_menu" class="sdt_menu">
	<li>
		<a href="#">
			<img src="images/1.jpg" alt=""/>
			<span class="sdt_active"></span>
			<span class="sdt_wrap">

				<span class="sdt_link">Portfolio</span>
				<span class="sdt_descr">My work</span>
			</span>
		</a>
		<div class="sdt_box">

			<a href="#">Websites</a>
			<a href="#">Illustrations</a>
			<a href="#">Photography</a>
		</div>

	</li>
	...
</ul>

Si no necesitamos submenu, simplemente no mostramos el elemento DIV. La imagen no se debe mostrar en el inicio, por esta razon creamos un ancho y alto de 0px en las CSS.
Vamos a darle los estilos.

EL CSS

Comenzamos con la lista desordenada aportando el estilo básico:

ul.sdt_menu{
	margin:0;
	padding:0;
	list-style: none;
	font-family:"Myriad Pro", "Trebuchet MS", sans-serif;
	font-size:14px;
	width:1020px;
}

Normalmente vamos a necesitar eliminar los indicadores por defecto de decoración de texto y el outline de los elementos de nuestro menú:

ul.sdt_menu a{
	text-decoration:none;
	outline:none;
}

Nuestra lista de elementos debe flotar a la izquierda y tendrá una posición relativa, así podremos fijar posiciones absolutas para el resto de elementos incluidos en cada uno de ellos. Si no queremos fijar esto, los elementos serán posicionados absolutos respecto al principal elemento de la páginas:

ul.sdt_menu li{
	float:left;
	width:170px;
	height:85px;
	position:relative;
	cursor:pointer;
}

El estilo del los links principales donde nosotros tenermos dos span que contienen el título y la descripción de cada elemento tendrán estos estilos:

ul.sdt_menu li > a{
	position:absolute;
	top:0px;
	left:0px;
	width:170px;
	height:85px;
	z-index:12;
	background:transparent url(../images/overlay.png) no-repeat bottom right;
	-moz-box-shadow:0px 0px 2px #000;
	-webkit-box-shadow:0px 0px 2px #000;
	box-shadow:0px 0px 2px #000;
}

Fijate que el z-index lo vamos a colocar apilado y en orden para los elementos importantes, de esta forma se mostrarán sobre el resto de elementos del menú.

Usamos una imagen de fondo para crear un efecto cristal con una semitransparencia de indice (gradient). Cuando usamos algún fondo tipo "pattern", como es la madera en el ejemplo, crear un bonito efecto. La recomendación es probar con otras texturas de fondo y ver los resultados que se obtienen.

También podremos usar  sombras cambiando los valores 2px 2px 6px #000 inset que también nos van a dar un agradable efecto.

La imagen la personalizamos como sigue:

ul.sdt_menu li a img{
	border:none;
	position:absolute;
	width:0px;
	height:0px;
	bottom:0px;
	left:85px;
	z-index:100;
	-moz-box-shadow:0px 0px 4px #000;
	-webkit-box-shadow:0px 0px 4px #000;
	box-shadow:0px 0px 4px #000;
}

Queremos animar la imagen que viene desde el fondo, para ello además vamos a utilizar la parte inferior (Bottom) como punto de referencia. También podremos agregar otras sombras a la caja. El primero de los dos valores cero hace que la sombra se genere entorno a la imagen emergente. Esto quedará dentro del propio link del elemento. Este efecto puede ser usado en cualquier elemento como efecto de borde sombreado. Es importante reconocer que este efecto no será visible en los navegadores IE ya que no disponen de CSS3.

El "wrapper" para el título y descripción que está en el span se define así:

ul.sdt_menu li span.sdt_wrap{
	position:absolute;
	top:25px;
	left:0px;
	width:170px;
	height:60px;
	z-index:15;
}

Si tenemos textos más largos necesitaremos adaptar un poco estos valores. Verificamos si cambiamos los valores que estos se ajustan a los parámetros que luego también usamos en el Javascript .

Ahora definimos el estilo para las cajas deslizantes inferiores. Damos un alto de cero y la posición ya está en el camino que necesitamos para incrementas el alto de la animación:

ul.sdt_menu li span.sdt_active{
	position:absolute;
	background:#111;
	top:85px;
	width:170px;
	height:0px;
	left:0px;
	z-index:14;
	-moz-box-shadow:0px 0px 4px #000 inset;
	-webkit-box-shadow:0px 0px 4px #000 inset;
	box-shadow:0px 0px 4px #000 inset;
}

Los elementos comunes para estilos de spans y links en las cajas serán estos:

ul.sdt_menu li span span.sdt_link,
ul.sdt_menu li span span.sdt_descr,
ul.sdt_menu li div.sdt_box a{
	margin-left:15px;
	text-transform:uppercase;
	text-shadow:1px 1px 1px #000;
}

El título y descripción se personalizan con estos estilos:

ul.sdt_menu li span span.sdt_link{
	color:#fff;
	font-size:24px;
	float:left;
	clear:both;
}
ul.sdt_menu li span span.sdt_descr{
	color:#0B75AF;
	float:left;
	clear:both;
	width:155px;
	font-size:10px;
	letter-spacing:1px;
}

El submenu que va en una caja, inicialmente está oculta y bajo la caja gris. Necesitamos animarla a la derecha del elemento dependiente para mostrarla. Si nosotros, por ejemplo, ponemos el ratón sobre el último elemento, animamos el submenú a la izquierda. Queremos animar el submenú de su posición inicial a la izquierda en el último elemento, en el resto de los casos vamos a realizar una animación hacia la derecha de este.

ul.sdt_menu li div.sdt_box{
	display:block;
	position:absolute;
	width:170px;
	overflow:hidden;
	height:170px;
	top:85px;
	left:0px;
	display:none;
	background:#000;
}
ul.sdt_menu li div.sdt_box a{
	float:left;
	clear:both;
	line-height:30px;
	color:#0B75AF;
}

El primer link del submenú deberá tener un margen superior para dejarlo bien presentado:

ul.sdt_menu li div.sdt_box a:first-child{
	margin-top:15px;
}
ul.sdt_menu li div.sdt_box a:hover{
	color:#fff;
}

Esto es todo lo necesario en nuestra hoja de estilos, vamos ahora con la parte de Javascript!

El JavaScript

Cuando entramos con el ratón sobre un elemento de la lista alargamos o agrandamos la imagen correspondiente, y mostramos los dos elementos incluidos, el sdt_active span y el sdt_wrap span. Si el elemento en cuestión tiene submenú (sdt_box), entonces deslizamos lateralmente el submenú. Si los elementos son del primero al penúltimo se desliza a la dercha, solo el último elemento desliza a la izquierda el submenú:

$(function() {
	$('#sdt_menu > li').bind('mouseenter',function(){
		var $elem = $(this);
		$elem.find('img')
			 .stop(true)
			 .animate({
				'width':'170px',
				'height':'170px',
				'left':'0px'
			 },400,'easeOutBack')
			 .andSelf()
			 .find('.sdt_wrap')
			 .stop(true)
			 .animate({'top':'140px'},500,'easeOutBack')
			 .andSelf()
			 .find('.sdt_active')
			 .stop(true)
			 .animate({'height':'170px'},300,function(){
			var $sub_menu = $elem.find('.sdt_box');
			if($sub_menu.length){
				var left = '170px';
				if($elem.parent().children().length == $elem.index()+1)
					left = '-170px';
				$sub_menu.show().animate({'left':left},200);
			}
		});
	}).bind('mouseleave',function(){
		var $elem = $(this);
		var $sub_menu = $elem.find('.sdt_box');
		if($sub_menu.length)
			$sub_menu.hide().css('left','0px');

		$elem.find('.sdt_active')
			 .stop(true)
			 .animate({'height':'0px'},300)
			 .andSelf().find('img')
			 .stop(true)
			 .animate({
				'width':'0px',
				'height':'0px',
				'left':'85px'},400)
			 .andSelf()
			 .find('.sdt_wrap')
			 .stop(true)
			 .animate({'top':'25px'},500);
	});
});

En este tutorial se utiliza el jQuery Easing Plugin para conseguir el efecto de animación en las diferentes partes a mostrar.

Aquí tienes el mismo ejemplo funcionando libre y con todas las opciones del menú según el ejemplo original: DEMO STAND ALONE