Image Menu de Phatfusion est un élégant menu animé à base d'images, utilisant la librairie mootools. Pour fonctionner, une page web doit inclure dans son en-tête les fichiers JavaScript imageMenu.js et mootools.js, ainsi que le fichier CSS imageMenu.css.
Le menu doit être défini dans la page au moyen d'une liste HTML contenant autant d'éléments LI que nécessaire : chaque élément LI déclare l'attribut class avec la valeur kwick opt<n>, où
En effet, le fichier imageMenu.css définit des sélecteurs CSS pour les classes opt1, opt2, ..., opt5 et permet ainsi d'associer une image pour chaque élément du menu.
Voici Image Menu en action avec trois éléments de menu :
- Lanscapes
- People
- Nature
Dans cet exemple, le click sur une image est détectée et une fonction JavaScript est appelée, permettant ainsi l'affichage d'un message utilisateur.
Si vous souhaitiez provoquer la navigation vers une URL particulière, vous pouvez avoir recours à l'objet JavaScript window, comme ceci :
window.location.href = 'http://www.odelia-technologies.com/';
Le fichier attaché à cet article contient les sources de cette démonstration.