[Webdesign] iconDock, un autre script JQuery pour créer des menus « Fish-Eye »

Au début du mois je vous présentais jqDock, un superbe script qui permet de créer des menus « Fish-Eye » à la manière de ce que propose le dock de Mac OS X.

Ce genre de dock rend les menus à la fois discrets et percutants.

iconDock exemple2 [Webdesign] iconDock, un autre script JQuery pour créer des menus Fish Eye

iConDock est un concurrent direct, qui permet de créer exactement la même chose.

iconDock exemple [Webdesign] iconDock, un autre script JQuery pour créer des menus Fish Eye

Le principe est globalement le même, on crée une structure de menu que l’on instrumente via ce script iConDock et jQuery.

<div id="Bar">
	<a href="http://blog.websourcing.fr/1" name="Alertes_name" title="Google alertes">
		<img src="img/alerts_35.gif" alt="Campana_alt" border="0" />
	</a>
	<a href="http://blog.websourcing.fr/2" name="script_name" title="Google script">
		<img src="img/desktop_35.gif" alt="Escriptori_alt" border="0" />
	</a>
	<a href="http://blog.websourcing.fr/3" name="Compres_name" title="Google compres">
		<img src="img/froogle_35.gif" alt="Froogle_alt" border="0" />
	</a>
	<a href="http://blog.websourcing.fr/4" name="GMail_name" title="Google mail">
		<img src="img/gmail_35.gif" alt="Gmail_alt" border="0" />
	</a>
	<a href="http://blog.websourcing.fr/5" name="Groups_name" title="Google groups">
		<img src="img/groups_35.gif" alt="Grups_alt" border="0" />
	</a>
	<a href="http://blog.websourcing.fr/6" name="Linux_name" title="Linux">
		<img src="img/special_35.gif" alt="Especial_alt" border="0" />
	</a>
</div>

Là encore, la configuration est simple:

<script type="text/javascript">
	var confObject = {
		iconMinSide : 35,
		iconMaxSide : 70,
		distAttDock : 100,
		coefAttDock : 2,
		veloOutDock : 500,
		valign: 'bottom'
	}
	jQuery(function() {
 		jQuery("#Bar").addDockEffect(confObject);
	});
</script>

Le script a été testé avec différents navigateurs et différents OS:

    PC & Windows XP

  • Mozilla Firefox 2.0
  • Internet Explorer 6.0
  • Internet Explorer 7.0
    Apple Mac & Mac OS X

  • Mozilla Firefox 1.5
  • Safari 2.0

Personnellement je préfère jqDock. Son système de configuration permet de réaliser plus de choses (comme des menus verticaux). Néanmoins iconDock ne manque pas d’atouts.

download ico [Webdesign] iconDock, un autre script JQuery pour créer des menus Fish EyeVoir le script en action – démonstration

download ico [Webdesign] iconDock, un autre script JQuery pour créer des menus Fish EyeTéléchargez le script et en savoir plus