Menú Dock CSS+JQuery

¿Te gustaría tener un menú al estilo MAC, en tu sitio?

CSS Dock Menu es una interesante alternativa elaborada por la gente de ndesign studio usando JQuery y CSS, ha sido testeado en los navegadores, IE (6 en adelante), Opera (9 en adelante), Firefox (2 en adelante), Safari (2 en adelante), etc. Fácil de adaptar tanto en la parte superior como en el footer de tu sitio.

El paquete de descarga incluye todos los archivos necesarios, incluyendo las imágenes y ejemplos de uso.

Para usarlo basta con agregar el siguiente código entre etiquetas head:

<!-- incluimos scripts necesarios --> 
<script type="text/javascript" src="js/jquery.js"></script> 
<script type="text/javascript" src="js/interface.js"></script>

<!-- incluimos la hoja de estilo --> 
<link href="style.css" rel="stylesheet" type="text/css" /> 

<!-- alternativa para el IE --> 
<!--[if lt IE 7]> 
 <style type="text/css"> 
 .dock img { behavior: url(iepngfix.htc) } 
 </style> 
<![endif]-->

dentro del body armamos el menú:

<div class="dock" id="dock">
<div class="dock-container">
<a class="dock-item" href="#"><img src="images/home.png" /><span>Inicio</span></a>
<a class="dock-item" href="#"><img src="images/email.png" /><span>Contacto</span></a>   
<a class="dock-item" href="#"><img src="images/portfolio.png" /><span>Portfolio</span></a>     
<a class="dock-item" href="#"><img src="images/calendar.png" /><span>Calendario</span></a>  
<a class="dock-item" href="#"><img src="images/rss2.png" /><span>RSS</span></a>
</div>  
</div>

y luego las configuraciones para el menú:

<script type="text/javascript"> 
// se carga al inicio
$(document).ready(
   function() 
   { 
      $('#dock').Fisheye( { 
         maxWidth: 50, 
         items: 'a', 
         itemsText: 'span', 
         container: '.dock-container', 
         itemWidth: 40, 
         proximity: 90, 
         halign : 'center' 
      }) 
   }
); 
</script>

---

Enlaces:
Demo: CSS Dock Menú
Descarga: css-dock-menu.zip