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 :

<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" />

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

<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>

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

$(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
      }
    )
  }
);

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

Recursos:

También te puede interesar

3 Comments

  1. oscar
    sep 11, 2011 @ 17:49:14

    • craftyman
      sep 11, 2011 @ 21:05:09

      debes tener 2 contenedores.. pueden ser iguales pero con diferentes ID… y llamarlos de esta manera:

      $(‘#dock’).Fisheye(
      {
      ….
      }
      )
      $(‘#dock2′).Fisheye(
      {

      }
      )

  2. oscar
    sep 12, 2011 @ 11:47:07

    muchas gracias, ya tengo las dos filas, y como hago para que no queden tanto espacio entre las dos filas?