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!
Hi Jean,I need a mod on pchart, I can pay with paypalI need that the radar graph axis display always from zero to 10 also if i insert value from 3 to 6...could you do it?sorry if I contact you here but I hadn't found other ways...thanksGaetano
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?
directory line javascript mercator conversion active des convertir longitude le ldap gps CODE terrestre SUR url ajax metar image sunyday une cli menu trou PAGE regexp anim%C3%A9 snmp www.sunyday.net et convertisseur regex avec d%27ozone authentification protocole map pour lldp sunyday.net anomalie fade de explication coordonn%C3%A9es web fading find + adresse ntfs latitude script nuls couche un dans en synop la champ photovoltaique html module php browser google les ad magn%C3%A9tique
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.
