Dock Menu con Jquery

JQuery es una Librería Javascript al igual que Dojo, Prototype, Mootools y muchas mas, que nos ayudan a construir paginas web interactivas para el lado del usuario.
El Dock es muy conocido en el mundo de Mac, en Windows se podria llamar ¿Menú de Inicio?.
DockMenu es muy sencillo de usar y muy practico para algunos proyectos web.

Primero creamos el HTML incluyendo los dos Javascript y la hoja de estilo, en este DockMenu ya biene el fix para solucionar problemas de imagenes PNG para internet explorer :

[html]
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/interface.js"></script>
<!–[if lt IE 7]>
<style type="text/css">
div, img { behavior: url(iepngfix.htc) }
</style>
<![endif]–>
<link href="style.css" rel="stylesheet" type="text/css" />
[/html]

Luego debemos crear en el Body un div y dentro una lista de links que sera nuestro DockMenu.

[html]
<div class="dock" id="dock2">
<div class="dock-container2">
<a class="dock-item2" href="#">
<span>Home</span><img src="images/home.png" alt="home" />
</a>
<a class="dock-item2" href="#">
<span>RSS</span><img src="images/rss.png" alt="rss" />
</a>
</div>
</div>
[/html]

Para Terminar debemos de hacer un poco de código Javascript para hacer funcionar el DockMenu ( Esto también se escribe dentro del Body ).

[javascript]
$(document).ready(
function()
{
$(‘#dock2’).Fisheye(
{
maxWidth: 60, //m&aacute;ximo de expansi&oacute;n
items: ‘a’, //etiqueta de Items
itemsText: ‘span’, //etiqueta del texto del Item
container: ‘.dock-container2’, //contenedor del dockmenu
itemWidth: 40, //tamaño inicial del Item
proximity: 80, //aproximaci&oacute;n del mouse para la expansi&oacute;n
alignment : ‘left’, //alineaci&oacute;n de item
valign: ‘bottom’, //alineaci&oacute;n vertical del item
halign : ‘center’ //alineaci&oacute;n del dockmenu
}
)
}
);
[/javascript]

Eso es todo, ya tienes el DockMenu como en Mac. Puedes ver la Demo aquí.

Recursos: