Dock menu con jQuery para tu web

en CSS, Diseño web, JQuery, Javascript / abril 23, 2009 / 1 Comentario

Un regalo para los fans de MAC, este menú basado en jQuery y CSS inspirado en el dock de la manzanita. Desarrollado por ndesign, con íconos que también ellos diseñaron. Incluye 2 estilos: top y bottom

Descarga el menúMira el demo

Implementación del menú:

Luego de descargar el menú, incluye el siguiente código en el <head> de tu web:

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

Incluye lo siguiente en cualquier parte del <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>

Para añadir un ítem al top dock (el que se ubica en la parte superior)

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

Y para añadir un ítem al bottom dock (el de abajo)

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

Funciona con IE 6, IE 7, Opera 9, Firefox 2, y Safari 2 (algunos errores menores en Safari)

    Terminos de busqueda:


    Un comentario en “Dock menu con jQuery para tu web”

    • Bitacoras.com Dijo:

      Información Bitacoras.com…

      Valora en Bitacoras.com: Un regalo para los fans de MAC, este menú basado en jQuery y CSS inspirado en el dock de la manzanita. Desarrollado por ndesign, con íconos que también ellos diseñaron. Incluye 2 estilos: top y bottom Descarga el menú – Mi…


    Comentar

    XHTML: Puedes usar los siguientes tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre lang="" line="" escaped="">