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!
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?
coordonn%C3%A9es de resize authentification latitude script gd trou map html image et des protocole regexp metar module ntfs CODE conversion find SUR la adresse du fading Cannot nuls javascript dans COMMENT ldap lldp une mercator php un + convertir gps cli command synop anomalie ajax magn%C3%A9tique d%27ozone PAGE browser terrestre longitude google directory explication champ pour photovoltaique couche le active line regex ad url en snmp fade les web sunyday
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.
