Avec la mode web 2.0 et des frameworks all-in-one arrivent une multitude de nouvelles idées
dans le monde du design web. La ou il y a quelques mois j'aurais réalisé une animation en flash
pour faire ce genre d'effet, la compatibilité grandissante des différents navigateurs permet désormais
de se lancer dans l'écriture de code ajoutant énormément d'estéthique à nos réalisations. La fin de
flash? Certainement pas! Une alternative pour ce qui touche à la décoration des pages.. sans doute!
Le code que je vous propose ici permet de créer un menu qui s'anime lorsque le curseur de la souris
le survole. Il se compose d'un fichier .css qui permet de s'adapter à l'esthétique de votre
site ( couleur du menu, du texte, police ) et un fichier .js qui contient le javascript.
J'ai essayé de rendre la partie HTML de ce script la plus simple possible, ne nécessitant que
peux de modification au code source des pages. Cela donne :
Chaque entrée du menu est matérialisée par une DIV à l'ID unique. C'est l'appel à la fonction
pInit(); qui va ajouter à ces DIV les événements onMouseover et onMouseout. Dans
cette fonctions nous allons énumérer tous les éléments de type DIV contenus dans la page. Si nous
en trouvons de la classe pMenu alors nous les modifions :
La fonction AttachEvent provient du site http://phrogz.net/JS/AttachEvent_js.txt,
elle permet de rajouter des événements à des objets déja instanciés. Cette fonction est
contruite pour être compatible avec Internet Explorer & Firefox.
La gestion de l'animation est faite au travers d'un timer qui vérifie le status de chaque DIV
( en train de grandir, position selection, en train de rapetisser, position initiale ), quand toutes les
DIVs sont dans une position statique, le timer est arrêté. Pour rediriger l'utilisateur vers
une nouvelle adresse quand une entrée du menu est sélectionnée vous pouvez :
N'oubliez pas d'ajouter les inclusions dans l'en-tête de votre page HTML :
Vous pouvez télécharger le code en cliquant ici!
Just what I was looking for, going to try it on my site.
felix
23.07.09 / 19:18
Hi jean-Damin!please contact me under that email adresse above.i have some question about licence and sponsoring.thanks!
Jérémy
22.04.08 / 18:38
Bonjour,tout d'abord, bravo pour ce menu fort sympathique.je voudrai l'utiliser mais je me heurte a un problème.tel quel, le menu fonctionne, mais si je met un doctype au debut de ma page, seul le dégradé de couleur du lien fonctionne, le menu ne se décale pas au passage du curseur.es-ce normal?cordialement.
Utilisez le lien http://www.sunyday.net/trackback-Menu-anime-en-javascript pour faire un trackback vers cette article depuis votre
site web. Les trackbacks sont soumis à une approbation mutuelle et susceptibles d'être supprimés si jugés indésirables.
Pense-bete, bloc-note ou au choix carnet de réflexions. Probablement peu marrant, jamais à jour. En ligne quand le coeur lui en dit, lié par intermittence avec le reste du monde. Ce site est une expression de la pensée analytique de son auteur.
Touche à tout restant bouche bée devant la complexité et la cohérence de ce monde je m'évertue à essayer d'en comprendre les rouages. En passant par la météorologie, la physique ou bien l'informatique, tout est une raison d'apprendre!
Comment les gens arrivent-il ici?
en + active nuls terrestre menu des www.sunyday.net de trou ldap sunyday.net image regex authentification regexp google magn%C3%A9tique module line protocole map latitude longitude web browser resize d%27ozone fading mercator conversion et convertir la snmp synop explication dans sunyday lldp url script SUR anim%C3%A9 PAGE php adresse javascript fade gd metar photovoltaique html couche convertisseur ntfs pour une CODE le coordonn%C3%A9es gps un cli ad les avec directory ajax champ
Jean-Damien POGOLOTTI© 2k6-2k7 | Design // Code
Qui suis-je?
14°C
63%
1019
Pense-bete, bloc-note ou au choix carnet de réflexions. Probablement peu marrant, jamais à jour. En ligne quand le coeur lui en dit, lié par intermittence avec le reste du monde. Ce site est une expression de la pensée analytique de son auteur.
