Websourcing.fr

Websourcing.fr » ActualitĂ©s, Web, Logiciels et Fun

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

[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

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

iconDock_exemple

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.

Voir le script en action – dĂ©monstration

Téléchargez le script et en savoir plus


Cet article vous a plu ?

Commenter Laissez un commentaire | Recevez les mises à jour Souscrivez au flux RSS | Partager : Twitter AddInto Fuzz del.icio.us Wikio FR Blogonet
Websourcing.fr - Tous droits réservés. Reproduction interdite sans accord préalable.
  1. Pas encore de commentaire. Soyez le premier à commenter!

(Ne sera pas publié)
  1. Pas encore de trackback.