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.
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
muy bueno, ya lo probaré
Hola!
Está muy bueno el ejemplo, solo tengo una pregunta espero puedan respondermela
¿Hay manera de poner el dock en la parte superior de la página?
Les agradezco.
Saludos.
Hola Mauricio, claro que si se puede, en la propiedad valign en lugar de darle el valor de bottom, le debes especificar valign:top
pruebalo y me dices que tal te jala
saludos
Muy pero muy bueno, lo utilizare en mi sitio.
Saludos.
Hola, me gustó el post, lo que andaba buscando, estoy haciendo una pagina de tarea, fines educativos y aprendizaje, pero quisiera que ese menú vaya dentro de un DIV , y ese div lo puse a la derecha y todo pero El menú tuyo va a una sola posición y cuando lo modifico se malogra todo, Me gustaría que si lo puedes meter dentro de un DIV y ese div poder yo moverlo por donde sea sin malograr el diseño del Menú
Hola, si te das cuenta el menú está dentro de un div con id="dock2", solo es cuestión de que juegues con el CSS