Crear un vistoso menú vertical con jQuery

En queness.com publicaron tutorial para crear con jQuery un vistoso menú vertical que tiene una flecha que flota hasta el elemento que se selecciona.

El ejemplo de este tutorial está disponible para descargar en un archivo ZIP que contine un demo funcional, los gráficos y las bibliotecas jQuery.

Resúmen de la implementación

Implementar este tipo de menú es muy simple, primero tenemos que enlazar las bibliotecas en la sección HEAD del HTML:

<script type="text/javascript" src="js/jquery-1.3.1.min.js"></script>
<script type="text/javascript" src="js/jquery.easing.1.3.js"></script>

Agregar el código Javascript que implementa el menú:

<script>
$(document).ready(function () {
//Set the height of the block
$('#menu .block').height($('#menu li').height());
//go to the default selected item
topval = $('#menu .selected').position()['top'];
$('#menu .block').stop().animate({top: topval}, {easing: '', duration:500});
$('#menu li').hover(
function() {
//get the top position
topval = $(this).position()['top'];
//animate the block
//you can add easing to it
$('#menu .block').stop().animate({top: topval}, {easing: '', duration:500});
//add the hover effect to menu item
$(this).addClass('hover');
},
function() {
//remove the hover effect
$(this).removeClass('hover');
}
);
});
</script>

Agregar los estilos visuales del menú:

<style>
#menu {
font-family:verdana;
font-size:12px;
position:relative;
margin:0 auto;
width:200px;
}
#menu ul {
/* remove list style */list-style:none;
padding:0;
margin:0;
/* set the layer position */position:relative;
z-index:5;
}
#menu li {
/* set the styles */background:#ccc url(bg.gif) no-repeat 0 0;
padding:5px;
margin:2px;
cursor:pointer;
border:1px solid #ccc;
}
#menu li.hover {
/* on hover, change it to this image */background-image:url(bg_hover.gif) !important;
}
#menu li a {
text-decoration:none;
color:#888;
}
#menu .block {
/* allow javascript to move the block */position:absolute;
top:0;
/* set the left position */left:150px;
/* display above the #menu */z-index:10;
/* the image and the size */background:transparent url(arrow.png) no-repeat top right;
width:39px;
padding:4px;
cursor:pointer;
}
/* fast png fix for ie6 */* html .png{
position:relative;
behavior: expression((this.runtimeStyle.behavior="none")&&(this.pngSet?this.pngSet=true:(this.nodeName == "IMG" && this.src.toLowerCase().indexOf('.png')>-1?(this.runtimeStyle.backgroundImage = "none",
this.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + this.src + "', sizingMethod='image')",
this.src = "transparent.gif"):(this.origBg = this.origBg? this.origBg :this.currentStyle.backgroundImage.toString().replace('url("','').replace('")',''),
this.runtimeStyle.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='" + this.origBg + "', sizingMethod='crop')",
this.runtimeStyle.backgroundImage = "none")),this.pngSet=true));
}
</style>

Ahora sólo nos queda el código HTML:

<div id="menu">
<ul>
<li><a href="#">Item 01</a></li>
<li><a href="#">Item 02</a></li>
<li class="selected"><a href="#">Item 03</a></li>

<li><a href="#">Item 04</a></li>
<li><a href="#">Item 05</a></li>
<li><a href="#">Item 05</a></li>
</ul>
<div class="block png"></div>
</div>

Clean and Attractive jQuery Vertical Menu Tutorial

Sitio: www.queness.com/post/710/clean-and-attractive-jquery-vertical-menu-tutorial