Nes’ Blog

Sliding Menu, un menu en Javascript

Edit : Attention, ce menu était une version expérimentale. Il est maintenant disponible en version finale ici.

Bon, je crois qu’il serait temps pour moi de le présenter, parce que si j’attends que mon portfolio soit opérationnel pour ça alors ça va durer un moment… Je vous présente donc un menu réalisé par moi-même en Javascript : Sliding menu ! *TADAAAAAAM*

Oui, je sais, le nom est pourri mais je ne suis pas spécialisé dans l’invention des noms. Moi je réalise le projet, je le mets à jour, et puis basta. Je vais pas me torturer pendant des lustres pour trouver un nom tout bête namého =°

Bref, après ce spectacle atterrant de stupidité, passons au choses sérieuses et dévoilons un peu l’utilité de ce menu. Afin de vous le présenter, je l’ai inséré ci-dessous directement dans la page :

Indisponible

Vous remarquerez très certainement qu’il y a un petit problème au niveau de la fluidité lorsque l’une des images arrive au bout à gauche du menu. En fait il s’agit d’un bug qui n’est pas encore résolu, cela vient d’un margin dont je dois vérifier la valeur pour savoir si l’une des images a atteint le bout ou pas. Je l’appelle la “constante inconnue” parce que cette valeur est vraiment mystérieuse. Si vous voulez, théoriquement je dois faire passer une image de l’autre côté du menu lorsque celle-ci arrive à 0px de largeur entre la bordure gauche du menu et l’image elle-même. Seulement, en pratique ça change vachement et j’ai donc constaté que la valeur qui fonctionne dans la plupart des cas est -3 (allez savoir pourquoi >_> ). Or, sur mon blog ça foire et c’est la valeur 1 qui fonctionne correctement. Bref, c’est un mystère qui reste à résoudre dans l’immédiat.

En tout cas ce problème vient des styles CSS définis par la page sur laquelle se trouve le menu. Dans mon code j’ai essayé d’en redéfinir un maximum afin que le menu s’affiche correctement mais comme vous pouvez le constater (avec l’exemple de la constante inconnue) il semblerait que j’en ai oublié. Enfin bon, si vous essayez de votre côté, vous verrez que ça fonctionne très bien la plupart du temps ;) .

En revanche, même si il peut y avoir quelques problèmes avec les styles CSS des différentes pages web, le menu fonctionne sur tous les navigateurs suivants : IE6+ / Safari / Opera / Firefox / Chrome. Il y a eu un problème il y a quelques temps sous Konqueror mais il me semble que c’est réglé maintenant (si quelqu’un pouvait me le confimer svp).

Bon, passons à autre chose : Si vous êtes un tantinet attentif vous constaterez que l’activation du menu se fait (sur cette page seulement) par l’activation d’un bouton, j’ai fait ceci afin de vous montrer que le menu s’affiche très bien chez le client même si le JS est désactivé (oui, y’a pas l’animation mais on voit les images et on a les liens).

Venons-en maintenant au code, j’ai essayé de le simplifier le plus possible pour l’utilisateur et ça n’a pas été une chose facile. Pour vous servir de ce menu il vous faudra générer un code basique comme celui-ci :

Oui, la coloration synthaxique fail avec le HTML, désolé. Bref, comme vous pouvez le constater le code est on ne peut plus basique, la balise P n’est pas obligatoire mais j’ai choisi de la gérer pour ceux qui veulent avoir un site xHTML Strict. Au passage, il est important de préciser que vous pouvez mettre autant d’images que vous le souhaitez, toutefois un minimum de 2 images est demandé.

Vous pouvez bien entendu ajouter des attributs pour les balises A et IMG mais il faudra l’indiquer dans la fonction d’activation du menu. Et puisqu’on parle d’elle, voyons comment l’utiliser :

• Le premier argument est l’id du div que vous voulez transformer en menu, vous pouvez y entrer le nom du div ou bien y mettre l’élément this ou encore document.getElementById(’le_menu’). Bref, j’ai laissé le choix.
• Le deuxième argument est la largeur que font chaque image. C’est assez contraignant comme argument à spécifier et je vais voir comment le virer (en fait je pourrais le faire simplement mais la compatibilité avec IE6 serait foireuse du coup).
• Les deux argument suivants sont les URL des images pour les fondus du menu. En premier, le fondu gauche, puis vient le fondu droit.
• L’argument “speed” (qui est facultatif) défini la vitesse de défilement du menu. Une valeur de 30 est une bonne moyenne mais rappelez vous que plus vos icônes sont petites, moins la vitesse devra être élevée et vice-versa.

Et le dernier argument est le plus chiant à expliquer (il est lui aussi facultatif). En fait, chaque attribut de vos balises possède une valeur différente. Par exemple, pour l’attribut title vous pouvez voir quatre valeurs différentes dans le code HTML donné ci-dessus. Le problème, c’est que si vous n’indiquez pas cet attribut à la fonction alors dès que la première image sera passée de l’autre côté du menu, celle-ci se retrouvera avec la valeur de l’attribut de la dernière image.

Il y a une raison logique à cela mais ça serait trop long à expliquer, je vais donc faire simple : les seuls attributs pris en compte par défaut sont l’attribut href de la balise A et l’attribut src de la balise IMG. Pour des attributs supplémentaires, il vous faudra faire un array puis ajouter un champ pour chaque attribut supplémentaire et enfin envoyer l’array en dernier argument à la fonction. Pour définir l’attribut et la balise que vous souhaitez prendre en compte il vous faudra mettre le nom de la balise, un tiret, et le nom de l’attribut. Par exemple, si je fais “a-title”, je veux donc choisir de prendre en compte l’attribut title de la balise A. C’est clair ?

Et évitez de mettre trop d’attributs supplémentaires sinon vous aurez le droit à des ralentissements (faut que j’améliore ça), donc pensez à l’optimisation : si vous mettez des attributs de même valeur à chaque balise alors ne l’indiquez pas dans la fonction car il n’y aura pas besoin de “transférer” les valeurs ;) .

Concernant la valeur de retour de la fonction, elle renvoie false en cas d’échec et true pour un succès. Au passage, n’essayez pas de mettre plusieurs menus sur une page ou bien vous aurez une valeur de retour égale à false. C’est voulu pour plusieurs raisons mais je verrai si je peux lever cette limite.

Voilà pour la présentation et l’utilisation de ce menu. Histoire de montrer que je bosse ( =° ) je vous montre aussi la liste des choses que j’ai encore à faire sur ce menu :

• Permettre plusieurs menus sur une page;
• Eviter de demander les balises supplémentaires à “transférer”;
• Remplacer le vieux focus pourri par une animation (c’est pour l’accessibilité);
• Afficher le menu uniquement après chargement complet de toutes les images de celui-ci;
• Permettre le déplacement gauche ou droit (oui, y’a que vers la gauche pour le moment);
• Résoudre le mystère de la “constante inconnue”.

Voilà tout. Pour télécharger le code c’est ici (avec un exemple en plus !). Et au passage, pour ceux qui veulent étudier le code vous le pourrez : tout est extrêmement commenté. J’ai même laissé une page nommée “prototype.html” qui est le tout premier essai pour ce menu, le code est plus simple que celui de la version finale, vous comprendrez plus facilement =)

Ah et sinon bonne nouvelle : je me suis fait défoncer la gueule par un gars de ma classe aujourd’hui \o/

Bref, la vie est belle ! Maintenant je me retrouve avec des yeux enflés comme pas possible et je me suis fait un ennemi qui pratique la boxe Thaï. Je vous laisse je vais aller me pendre ><

Nes’

Tags: Sliding Menu

2 commentaires pour Sliding Menu, un menu en Javascript

1. 

   Putain ça rosk, tu l’as enfin fini § Ca me donne envie de le mettre sur mon site (si je le remplis un jour).
Tydax le 24 septembre 2008
2. 

   Il est pas terminé, loin de là… mais disons qu’il est assez “mature” pour enfin être présenté à tout le monde plutôt qu’à certaines personnes =)
Nesquik69 le 24 septembre 2008

Laisser un commentaire