Websourcing.fr » Actualités, Web, Logiciels et Fun

[Webdesign] jqDock, un script jQuery pour créer un menu « Fish Eye » (MacOs-like)

Tags: Développement, Javascript, JQuery, MacOs, Webdesign
Posté dans Billets, Webworker par Lionel Roux le 10 juin 2009

Jusque il y a peu, un menu c’était une succession de boites plus ou moins carrés et alignées côtes à côtes voire les unes au dessus des autres.

Puis Apple est arrivé avec son Mac OS X et son dock « Fish Eye ». Pour faire simple, un tel menu magnifie ses icônes au passage de la souris.

Ce type de menu est parfait car il permet d’afficher de petites icônes en temps normal et d’avoir une meilleure visibilité sur celles-ci si besoin.

Sur un blog ou un site, l’espace disponible est une ressource rare qu’il faut donc optimiser.

jqDock est un plugin pour jQuery qui permet de créer simplement de tels menus. Je pense en premier lieu au ensemble d’icônes sociales que l’on affiche pour partager nos billets.

Le principe est simple, a l’approche de la souris, le plugin va modifier progressivement la taille de l’image.
Il est possible de créer des menus verticaux ou horizontaux, de choisir le sens d’expansion, et même de changer les images. Il est également possible de aire apparaitre un label.

<div id='menu'>
<a href='page1.html' title=''>
<img src='image1.gif' alt='image1.png' title='icone1' />
</a>
  ...
<a href='page2.html' title=''>
<img src='image2.png' alt='' title='icone2' />
</a>
  ...
</div>

Il vous suffit ensuite d’inclure un petit script dans vos pages ou dans votre fichier de scripts.

<script type='text/javascript' src='jquery-1.2.3.min.js'></script>
<script type='text/javascript' src='jquery.jqDock.js'></script>

jQuery(document).ready(function(){
  jQuery('#menu').jqDock(options);
});

Pour personnaliser le comportement la syntaxe est simple et repose sur une variable javascript.

var opts =
  // horizontal Dock with images expanding downwards in the vertical axis...
{ align: 'top'
  // set the maximum minor axis (vertical) image dimension to 48px
, size: 48
  // add labels..
, labels: true
  // swap the GIF extension for PNG extension for the larger image...
, source: function(i){ return this.src.replace(/gif$/,'png'); }
};
$(this).jqDock(opts);

Voila c’est fini pour un usage de base. L’ensemble est bien entendu personnalisable via CSS.
Pour finir, le plugin est gratuit.

Il existe un grand nombre de ces scripts, mais celui-ci est simple, léger et intuitif.

Il n’est pas impossible que je mette cette technique en Å“uvre sur le blog d’ici peu.

Voir une démonstration et télécharger le script jqDock