El HTML

La estructura de HTMl que necesitamos crear consiste en una lista desordenada que representa a nuestro menú y una serie de elementos DIV que utilizaremos para mostrar las descripciones de cada elemento del menú:

<div id="slidingMenuDesc" class="slidingMenuDesc">

	<div><span>Description for "About"</span></div>
	...
</div>

<ul id="slidingMenu" class="slidingMenu">
	<li><a href="#">Home</a></li>
	<li><a href="#">About</a></li>
	<li><a href="#">Portfolio</a></li>
	<li><a href="#">Work</a></li>
	<li><a href="#">Contact</a></li>
	<li><a href="#">Get a quote</a></li>
</ul>

Vamos a dejar la descripción de Menú sin texto, poco hay que decir de esa zona. Los elementos DIV van a ser mostrados en cuanto situemos el ratón sobre cada elemento del menú.

Las CSS

Primero vamos a definir el estilo del menú y su navegación y luego establecemos los elementos descriptivos de cada div.
Hacemos un reset de algunos estilos para asegurar posiciones:

body, ul, li, h1, h2, span{
	margin:0;
	padding:0;
}
ul{
	list-style:none;
}

Ponemos un fondo gris oscuro para hacer más contraste:

body{
	background:#292929;
}

Los elementos de la lista tendrán posiciones absolutas a la derecha de la pantalla que mostramos:

.slidingMenu {
	position: absolute;
	height:410px;
	width: 410px;
	top:40px;
	overflow:hidden;
	right:1px;
	font-family: Arial, Helvetica, sans-serif;
}

Además el menú debe flotar a la derecha y así conseguimos un alineado:

.slidingMenu li {
	display:block;
	float:right;
	clear:both;
	position:relative;
	overflow:hidden;
}

Los elementos “mover” se posicionan absolutamente también y les vamos a crear un ancho dinámico:

.slidingMenu li.move {
	width: 9px;
	height: 68px;
	right:0px;
	padding-right:10px;
	margin-top:2px;
	z-index: 8;
	position: absolute;
	background: #2183c4;
	background:
		-webkit-gradient(
			linear,
			left top,
			left bottom,
			from(#0771b8),
			to(#2183c4)
		);
	background:
		-moz-linear-gradient(
			top,
			#0771b8,
			#2183c4
		);
	-moz-border-radius: 8px 0px 0px 8px;
	-webkit-border-top-left-radius: 8px;
	-webkit-border-bottom-left-radius: 8px;
	border-top-left-radius: 8px;
	border-bottom-left-radius: 8px;
	-moz-box-shadow:1px 1px 5px #000;
	-webkit-box-shadow:1px 1px 5px #000;
	box-shadow:1px 1px 5px #000;
	}

Le damos al elemento en movimiento unos estilos de mayúsculas, colores y otros detalles.
El estilo del elemento que realiza el link estará así definido:

.slidingMenu li a {
	font-size:66px;
	text-transform:uppercase;
	text-decoration: none;
	color: #ddd;
	outline: none;
	text-indent:5px;
	z-index: 10;
	display: block;
	float: right;
	height: 66px;
	line-height: 66px;
	position: relative;
	overflow: hidden;
	padding-right:10px;
}

Las descripciones serán con posiciones relativas al contenedor principal. Por tanto fijamos un margen superior para alinear el primero de los deslizantes:

/* Descripciones */
.slidingMenuDesc{
	margin-top:40px;
	position:relative;
}

El elemento DIV con la descripción contiene un "span" dentro y es para asignar un fondo degradado como si fuera una el elemento "mover" y la misma caja sombreada. La esquinas redondeadas se crean en las esquinas opuestas:

.slidingMenuDesc div{
	background: #2183c4;
	background:
		-webkit-gradient(
			linear,
			left top,
			left bottom,
			from(#0771b8),
			to(#2183c4)
		);
	background:
		-moz-linear-gradient(
			top,
			#0771b8,
			#2183c4
		);
	height: 68px;
	padding-right:5px;
	left:-5px;
	width:0px;
	margin-top:2px;
	overflow:hidden;
	position:absolute;
	-moz-box-shadow:1px 1px 5px #000;
	-webkit-box-shadow:1px 1px 5px #000;
	box-shadow:1px 1px 5px #000;
	-moz-border-radius: 0px 8px 8px 0px;
	-webkit-border-top-right-radius: 8px;
	-webkit-border-bottom-right-radius: 8px;
	border-top-right-radius: 8px;
	border-bottom-right-radius: 8px;
}

Necesitamos ahora elementos absolutos, mientras ajustamos el top en base al elemento sobre el que se situa el ratón.

La descripción que está en el "span" también se posiciona absolutamente. No es imprescindible pero nos da más opciones si queremos luego aportar otros efectos de animación:

.slidingMenuDesc div span {
	font-size:36px;
	color: #f0f0f0;
	text-indent:5px;
	z-index: 10;
	display: block;
	height: 66px;
	line-height: 66px;
	position:absolute;
	right:10px;
	margin-left:5px;
	top:-3px;
}

Ahora vamos con el script que nos completará todo el trabajo!

El JavaScript

Primero agregamos las siguientes librerías necesarias en la cabecera del documento:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script src="cufon-yui.js" type="text/javascript"></script>
<script src="BabelSans_500.font.js" type="text/javascript"></script>
<script src="jquery.easing.1.3.js" type="text/javascript"></script>

Y ahora vamos a agregar el siguiente Javascript:

$(function() {
	Cufon.replace('a, span').CSS.ready(function() {
		var $menu 		= $("#slidingMenu");

		/**
		* El primer elemento del menu,
		* estara selecionado por defecto
		*/
		var $selected	= $menu.find('li:first');

		/**
		* Este es un elemento absoluto,
		* que se mueve a traves de los elementos de menu
		* tendra el ancho del elemento seleccionado
		* y la distancia superior desde el elemento hasta arriba
		*/
		var $moving		= $('<li />',{
			className	: 'move',
			top			: $selected[0].offsetTop + 'px',
			width		: $selected[0].offsetWidth + 'px'
		});

		/**
		* cada div (descriptions) deslizante debe tener el mismo top
		* como el correspondiente al elemento del menú
		*/
		$('#slidingMenuDesc > div').each(function(i){
			var $this = $(this);
			$this.css('top',$menu.find('li:nth-child('+parseInt(i+2)+')')[0].offsetTop + 'px');
		});

		/**
		* agregar el div absoluto al menu;
		* cuando el raton esta fuera de este
		* el movimiento arriba (como esta inicialmente);
		* cuando nos movemos a otro elemento nos movemos a su posicion
		*/
		$menu.bind('mouseleave',function(){
				moveTo($selected,400);
			  })
			 .append($moving)
			 .find('li')
			 .not('.move')
			 .bind('mouseenter',function(){
				var $this = $(this);
				var offsetLeft = $this.offset().left - 20;
				//slide in the description
				$('#slidingMenuDesc > div:nth-child('+ parseInt($this.index()) +')').stop(true).animate({'width':offsetLeft+'px'},400, 'easeOutExpo');
				//move the absolute div to this item
				moveTo($this,400);
			  })
			  .bind('mouseleave',function(){
				var $this = $(this);
				var offsetLeft = $this.offset().left - 20;
				//slide out the description
				$('#slidingMenuDesc > div:nth-child('+ parseInt($this.index()) +')').stop(true).animate({'width':'0px'},400, 'easeOutExpo');
			  });;

		/**
		* mover el div absoluto,
		* con cierta velocidad,
		* a la posicion del elemento $elem
		*/
		function moveTo($elem,speed){
			$moving.stop(true).animate({
				top		: $elem[0].offsetTop + 'px',
				width	: $elem[0].offsetWidth + 'px'
			}, speed, 'easeOutExpo');
		}
	}) ;
});

Después vamos a asignar fuentes lo que se denomina "cufonize" por utilizar el CuFon Script (todos los elementos “a”  y todos los elementos “span”), la funcion principal toma y ejecuta esto. Seleccionamos por defecto el primer elemento de la lista, que es el HOME. Cuando ponemos el ratón sobre uno de los elementos del menú el elemento "li.move" se desplazará hasta la posición derecha indicada y a continuación se desliza el lateral hacia la derecha mostrando la descripción.

Dada la tipología de posiciones absolutas y la utilización el 100% del ancho de la pantalla este menú está más orientado a dispositivos móviles o bien a páginas sencillas. De todas formas puedes verlo funcionando solo en este link: DEMOSTRACION STAND-ALONE

Lo más destacable es lo dinámico de cada uno de los elementos y el deslizamiento de cada elemento. Este tutorial fue extraido de Codrops - Mary Lou, otro excelente trabajo con jQuery y CSS