APR
01
Menu animé en javascript
01.04.2008 | | Auteur : Ayashi | Catégorie : Programmation
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!
Tags : menu, anime, javascript | Digg!
Commentaires  | Ajouter un commentaire
1000 Jogos
29.01.10 / 4:41
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.
Rechercher sur internet  ?  | Rechercher!
Trackback
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.
Retrieve RSS feed. Get notified by eMail. Meteo Parser.
Computing widgets...
Jean-Damien POGOLOTTI© 2k6-2k7 | Design // Code

Qui suis-je?

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  

Sunyday.net