He estado escribiendo algunos post sobre el Framework jQuery y algunos plugin que a mi entender aportan diseños interesantes a nuestros proyectos web. Hoy escribiré sobre uno de ellos que sin dudas es bien vistoso y agrega un plus a nuestros diseños, me refiero al plugin jqDock.
Si estas pensando en dotar a tu sitio de un menú que le de vistosidad a tu portal, debes valorar incluir jqDock. Con este plugin diseñado para jQuery podemos transformar un conjunto de imágenes, en un menú al estilo Dock de Mac, además podríamos orientarlo horizontal o verticalmente. Pero bien, sin mas preámbulo pasemos a la practica.
jqDock, Menú Dock con jQuery
Lo primero como de costumbre será descargarnos los js de jQuery y el de jqDock y ponerlos en uso:
Veremos en la imagen que hay 2 cosas a destacar:
Hacemos referencia a los js jQuery y jqDock:
| <script type='text/javascript' src='../Scripts/jquery-1.3.2.min.js'></script> <script type='text/javascript' src='../Scripts/jquery.jqDock.js'></script> |
Efectuamos la llamada a la función jqDock() o jqDock(option), que se encarga de tratar y dar la vistosidad a nuestro menú:
| <script type="text/javascript"> jQuery(document).ready(function() { jQuery('#menú').jqDock(); }); </script> |
Llegados a este punto ya hemos echo toda la referencias que necesitamos y la llamada a la función jqDock, solo nos basta crear nuestro menú:
| <body> |
Con esto ya hemos implementado un jqDock menú basado en jQuery.
Como vemos en el código, en cada uno de los enlaces o entradas del menú, he hecho una llamada a la propia página (jqDockMenu.aspx), esto es para simplificar el ejemplo, en un caso real debemos hacer el enlace a las páginas que deseemos.
Este ejemplo práctico de jqDock es muy básico, y aunque aún así es bien vistoso, podemos configurar algunas opciones adicionales que nos ayuden a exprimir aún más este interesante menú. Te invito a que continúes profundizando sobre este menú en la página oficial de jqDock ; y que comentes en este mismo artículo sobre las distintas opciones.
Entradas
No hay comentarios:
Publicar un comentario