• Sigueme en Twitter

Creando Dock estilo Mac con JQuery

Menú horizontal Estilo Dock de Mac con Jquery

Menú horizontal Estilo Dock de Mac con Jquery

Navegando por la red uno se encuentra con recursos bastante interesantes, un ejemplo es articulo que a continuación les presento que nos muestra como crear un menú horizontal con estilo dock de Mac OS X gracias a la libreria JQuery

No se diga más: comencemos. Primero crearemos un documento HTML en el cual introduciremos el siguiente código:


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
 "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<tittle>Dock</tittle>
</head>
<body>
 <div id="dock">
  <div class="dock-container">
    <a href="index.html"><span>Example 1</span><img src="images/dock/home.png"
    alt="home"></a>
    <a href="example2.html"><span>Example 2</span><img src="images/dock/
    email.png"alt="contact"></a>
    <a href="example3.html"><span>Example 3</span><img src="images/dock/
    portfolio.png" alt="portfolio"></a>
    <a href="all-examples.html"><span>All Examples</span><img src="images/dock/
    music.png" alt="music"></a>
    <a href="#"><span>Video</span><img src="images/dock/video.png" alt="video">
    </a>
    <a href="#"><span>History</span><img src="images/dock/history.png"
    alt="history"></a>
    <a href="#"><span>Calendar</span><img src="images/dock/calendar.png"
    alt="calendar"></a>
    <a href="#"><span>Links</span><img src="images/dock/link.png"
    alt="links"></a>
    <a href="#"><span>RSS</span><img src="images/dock/rss.png"
    alt="rss"></a>
    <a href="#"><span>RSS2</span><img src="images/dock/rss2.png"
    alt="rss"></a>
  </div><!-- fin de div .dock-container -->
 </div><!-- fin div .dock #dock -->
</body>
</html>

Ahora vamos a darle un poco de estilo a nuestro código, así que creamos un documento CSS y le damos el nombre de style.css

/* Ponemos un fondo para que se vea mas bonito el efecto*/
body{
background-image: url(../images/bg.png);
}
#dock {
padding: 255px;
}

.dock-container {
position: absolute;
height: 50px;
padding-left: 20px;
}

a.dock-item {
display: block;
width: 50px;
position: absolute;
bottom: 0;
text-align: center;
text-decoration: none; color: #333;
}
.dock-item span {
display: none;
padding-left: 20px;
}

.dock-item img {
border: 0;
margin: 5px 10px 0px;
width: 100%;
}

Creamos un archivo Javascript el cual nombramos como dock-example1.js, una vez creado el archivo ponemos el siguiente código:


$(function () {
	// Dock initialize
	$('#dock').Fisheye(
		{
			maxWidth: 30,
			items: 'a',
			itemsText: 'span',
			container: '.dock-container',
			itemWidth: 50,
			proximity: 60,
			alignment : 'left',
			valign: 'bottom',
			halign : 'center'
		}
	);
});

El codigo anterior es el que realizara el efecto de dock con la ayuda del script Fisheye, dicho script viene incluido en el ejemplo final que se adjuntara al final del Post.

Ya casi esta listo nuestro menu estilo Dock Mac, y para eso tendremos que cargar en nuestro documento HTML nuestra hoja de estilo asi como nuestros correspondientes script’s  y por supuesto jquery, para ello nos vamos a nuestro documento HTML y nos posicionamos en la etiqueta head y agregamos el siguiente codigo, el cual te debe de quedar de la siguiente manera:


<head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 <title>Dock</title>
 <script type="text/javascript" src="js/jquery.js"></script>
 <script type="text/javascript" src="js/fisheye-iutil.min.js"></script>
 <script type="text/javascript" src="js/dock-example1.js"></script>
 <link rel="stylesheet" href="css/style.css" type="text/css" />
</head>

Ahora simplemente nos queda probar y corroborar que todo haya salido correctamente y tendrás un efecto parecido a este: Ver ejemplo.

Así de sencillo, practico y vistoso tendrás un menú horizontal al estilo Mac

Y eso es todo espero les haya servido, lo mejor es estos casos para aprender e ir entendiendo como funciona el efecto es ir modificando el código para ver que es lo que sucede, a continuación adjunto los archivos necesarios de este ejemplo

descargar

Fuente: Nettuts+

Anuncios

3 comentarios

  1. […] Navegando por la red uno se encuentra con recursos bastante interesantes, un ejemplo es articulo que a continuación les presento que nos muestra como crear un menú horizontal con estilo dock de Mac OS X gracias a la libreria JQuery … See the original post:  Creando Dock estilo Mac con JQuery « Applendamos […]

  2. El enlace de descarga no funciona

  3. Enlace actualizado…Saludos

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: