Es una nueva comunidad sobre el reciente estándar de la web Html5, donde puedes encontrar tutoriales, tips, consejos, información, noticias y demás en un solo lugar.

Menú tipo Dock de Mac con jQuery y Fisheye


  Publicado hace |  Etiquetas: , , , , ,

Como ya sabemos, uno de los atractivos de jQuery es el uso de plugins, existen infinidad de plugins que nos permiten hacer distintas tareas, algunos nos ayudan a hacer más atractivo nuestro sitio, uno de ellos es el plugin fisheye el cual nos permite emular el tan bien conocido Dock de Mac, de una manera muy sencilla.

Menú tipo Dock de Mac con jQuery y Fisheye

Veamos el siguiente ejemplo:

<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="utf-8" />
<title>Doc Mac HTML5</title>
<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">
 .dock img { behavior: url(iepngfix.htc) }
 </style>
<![endif]-->

<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>

<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>Contacto</span><img src="images/email.png" alt="contacto" /></a> 
  <a class="dock-item2" href="#"><span>Portafolio</span><img src="images/portfolio.png" alt="portafolio" /></a> 
  <a class="dock-item2" href="#"><span>Musica</span><img src="images/music.png" alt="musica" /></a> 
  <a class="dock-item2" href="#"><span>Video</span><img src="images/video.png" alt="video" /></a> 
  <a class="dock-item2" href="#"><span>Calendario</span><img src="images/calendar.png" alt="calendario" /></a> 
  <a class="dock-item2" href="#"><span>Links</span><img src="images/link.png" alt="links" /></a> 
  <a class="dock-item2" href="#"><span>RSS</span><img src="images/rss.png" alt="rss" /></a> 
  <a class="dock-item2" href="#"><span>RSS2</span><img src="images/rss2.png" alt="rss" /></a> 
  </div>
</div>

<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>
</body>
</html>

Lo primero que debemos hacer es agregar JQuery y el plugin fisheye a nuestro código.

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/interface.js"></script>

Aunque ya casi nadie lo use, no está de más agregar un hack para que IE6 pueda interpretar la transparencia de los png’s:

<!--[if lt IE 7]>
 <style type="text/css">
 .dock img { behavior: url(iepngfix.htc) }
 </style>
<![endif]-->

A continuación armamos nuestro HTML que contendrá el menú tipo Dock, como se muestra en las siguientes líneas:

<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>Contacto</span><img src="images/email.png" alt="contacto" /></a> 
  <a class="dock-item2" href="#"><span>Portafolio</span><img src="images/portfolio.png" alt="portafolio" /></a> 
  <a class="dock-item2" href="#"><span>Musica</span><img src="images/music.png" alt="musica" /></a> 
  <a class="dock-item2" href="#"><span>Video</span><img src="images/video.png" alt="video" /></a> 
  <a class="dock-item2" href="#"><span>Calendario</span><img src="images/calendar.png" alt="calendario" /></a> 
  <a class="dock-item2" href="#"><span>Links</span><img src="images/link.png" alt="links" /></a> 
  <a class="dock-item2" href="#"><span>RSS</span><img src="images/rss.png" alt="rss" /></a> 
  <a class="dock-item2" href="#"><span>RSS2</span><img src="images/rss2.png" alt="rss" /></a> 
  </div>
</div>

Como podemos notar en el código de arriba, la creación del menú para el Dock consta de un contenedor principal al cual le pondremos como id=”dock2″, ésta es la clave ya que será al que hará referencia el plugin.

Una vez creado el Dock y estilizado con nuestra hoja de estilos pasamos al 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'
				}
			)
		}
	);

Como podemos ver en el código anterior el uso del plugin es muy sencillo, es solo cuestión de configurar las opciones a nuestro gusto y listo.
Pueden ver el ejemplo en funcionamiento en este enlace, así como descargar el código fuente y ver la documentación del plugin aqui interface.eyecon.ro/docs/fisheye

comments powered by Disqus