Hace algún tiempo aNieto2K nos mostraba como hacer un simpático dock con CSS al estilo de los Mac. Ahora me encuentro vía Digg con esta otra versión del dock, que según yo esta más fácil y más simpático, además mucho más fácil de conseguir en simples pasos. La idea es de N.Design Studio, y se logra así:

1. Bajar los archivos necesarios para hacerlo y los ejemplos

Aquí.

2. Insertar esto

Entre las etiquetas head coloca esto:

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

El primer código es para el Javascript. Obviamente el segundo es para el CSS, lo mejor es incluir lo que esta en el style.css del zip del principio en nuestro CSS principal. Y el tercero es para arreglar los problemillas con los png de IE6.

3. Configuración

Incluir esto dentro del tag body

<script type="text/javascript">
$(document).ready(
function()
{
$(’#dock2′).Fisheye(
{
maxWidth: 60,
items: ‘a’,
itemsText: ’span’,
container: ‘.dock-container2′,
itemWidth: 40,
proximity: 80,
alignment : ‘left’,
valign: ‘bottom’,
halign : ‘center’
}
)
}
);
</script>

4. Agregar / Quitar items

Para agregar al dock superior:

<a class="dock-item" href="#"><img src="images/home.png" alt="home" /><span>Home</span></a>

Recuerda que las etiquetas span deben ir después de las img para este caso.

Para agregar al dock inferior:

<a class="dock-item2" href="#"><span>Home</span><img src="images/home.png" alt="home" /></a>

Aquí las etiquetas span deben ir antes de las img.

¿Lindo, no? Me parece interesante el resultado, aunque no se como quedaría en una web, si mejoraría o empeoraría la accesibilidad. Pero igual es muy bueno. Para ver como queda puedes seguir este enlace.