Afficher un dock Mac OS X sur votre site

Publié par Kilaam le 1/9/2007 (2943 lus)

Vous aimeriez ajouter un effet très symphatique à votre menu ? Alors pourquoi ne pas mettre un dock. Vous savez la barre qui s'affiche avec les icônes sous Mac OS X et qui ajoute un certain design au système. Pour ce faire, nous utiliserons le script JQuery.Js et son plugin Interface.Js

Pour copier les différents codes, cliquez sur les images pour le sélectionner.

Étape 1 : Télécharger les scripts nécessaires

- Télécharger JQuery (version compressé) ici;
- Télécharger Interface (version Fisheye menu) ici;
- Le ZIP exemple (tout prêt)(facultatif) ici;

Étape 2 : Implémenter l'appel au script et au CSS

Il vous appeler les scripts en insérant les balises suivants entre les balises <head> et </head> de vos pages. N'oubliez pas de modifier le chemin (src et href) si vos scripts ne se trouvent pas dans le même dossier que la page.

Étape 3 : Créer votre menu

Votre menu doit se trouver dans les DIVs "dock" et "dock container". Les liens doivent avoir la classe "dock-item". Enfin, pour afficher le nom de l'icône en bas lors du survolement, insérer la balise span.

Étape 4 : Quelques options JS à rajouter...

- Taille maximale de l'agrandissement. Ne pas changer normalement
maxWidth: 50,

- Les éléments ci-dessous ne sont pas à modifier.
items: 'a',
itemsText: 'span',

- Nom du div contenant le dock
container: '.dock-container',

- Taille de l'image par défaut. Quand le curseur ne pointent pas dessus
itemWidth: 60,

- Hauteur de la zone où on doit prendre en compte le curseur
proximity: 90,

- Alignement du dock. left=gauche, center=centre, right=droit
halign : 'center'

Conclusion

Vous avez maintenant un dock sur votre site. Ne reste plus qu'à mettre vos propres liens et images. D'ailleurs, pour trouver des icônes rendez-vous sur le moteur IconFinder. Si vous avez des problèmes, vous pouvez poser vos questions sur le forum ou encore télécharger l'exemple complet et fonctionnel via cette page.

Naviguer à travers les articles
Smooth Scroll ou comment remonter en douceur	Des captures d'écran sur vos liens