CSS Dock Menu Script – Dock mac en tu web

css-dock-menu

Si eres fan de mac, amaras este menu en css que N-Design Studio DIseño para ti, Usa Jquery javascript library y Fisheye para la interface y algunos de sus iconos. Este viene con 2 estilos para el dock [Arriba y en el Fondo]. A continuacion se muestra como ponerlo en tu web.

Demo: Ver demostracion

1. Descarga los archivos
Download Source Files

2. Insertar los Codigos

Etre el <head> tag añade el siguiente codigo:

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

Lo primero es javascript, lo segundo es el linkeo al css y lo tercero es un hack para que salga bien en el explorer 6.

3. Configuracion

No olvides añadir el siguiente codigo donde sea dentro de la <body> tag.

<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. Añade o quita un item al dock

Añade un item al dock de hasta arriba:

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

Añade un item al dock del fondo:

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

FuenteNDesign Studio (traducido por mi)

Etiquetas: , , , , , , , ,

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s


A %d blogueros les gusta esto: