Menu à onglets avec javascript et css

Rigueur. Et passion !

Ne dites pas à ma mère que je suis artisan en architecture de l'information appliquée aux sites web : elle croit que je suis webdesigner, intégrateur HTML & CSS, rédacteur web, formateur NTIC et consultant en webmarketing depuis 2001 ! Voulez-vous en savoir plus ?

Le blog de l'intégrateur web

Menu à onglets avec javascript et css

Les menus à onglets sont à la mode depuis déjà quelques temps. Et c’est temps mieux car ils sont bien pratiques. Ils permettent de résoudre un des problème fondamentaux des interfaces utilisateurs : présenter plus d’informations sur une page, tout en permettant d’y accéder facilement. Ou tout au moins sans transformer votre site en usine à gaz dont le parfum ferait fuir vos visiteurs ;)

Je vous propose un exemple utilisant un petit script astucieux développé à trois mains (les deux de Benoît et ma main gauche ;) qui permet de permuter deux classes en même temps sur un événement onclick par exemple, en passant en paramètre l’ID du lien sur lequel on clique.

function multiClass(eltId) {
    arrLinkId = new Array('_0','_1','_2','_3');
    intNbLinkElt = new Number(arrLinkId.length);
    arrClassLink = new Array('current','ghost');
    strContent = new String()
        for (i=0; i<intNbLinkElt; i++) {
            strContent = "menu"+arrLinkId[i];
            if ( arrLinkId[i] == eltId ) {
                document.getElementById(arrLinkId[i]).className = arrClassLink[0];
                document.getElementById(strContent).className = 'on content';
            }
            else {
            document.getElementById(arrLinkId[i]).className = arrClassLink[1];
            document.getElementById(strContent).className = 'off content';
            }
        }
}

Explication de texte

  • Pour commencer, nous créons le tableau arrLinkId contenant les ID des liens sur lesquels doit s’effectuer le changement. Nous comptons ensuite le nombre d’éléments de cet Array grâce à la méthode length.
  • Un deuxième tableau contient les classes pour l’onglet current (celui sur lequel nous venons de cliquer) qui mettra les autres onglets dans un état fantômatique (.ghost).
  • Nous déclarons ensuite la variable strContent qui contiendra, pour chaque itération de la boucle for, l’ID du lien précédé de la chaîne « menu » pour obtenir « menu_1″ que l’on retrouve comme ID de la div à afficher ou masquer.
  • La suite du script fait en sorte que si nous cliquons sur le lien dont l’ID est « _1″, la div identifiée par « menu_1″ passe de la classe .on à la classe .off, tandis que le lien passe de la classe .ghost à la classe .current ; les autres div faisant le chemin inverse.

Il ne vous reste plus qu’à définir les classes par défaut au chargement de la page, soit .current soit ghost et faire de mêmem pour les div (.on ou .off) and the cat is in the bag!

Voilà, l’explication de texte est terminée pour aujourd’hui. Je vous laisse avec la démo du menu onglet avec CSS et Javascript.

PS : Ce script est assez souple pour avoir d’autres applications. Partagez donc le fruit de votre imagination ;)

Télécharger le fichier .html ou .php et les images

MAJ : Lorsque Javascript est désactivé, ce menu reste bloqué sur le premier onglet actif. Bien que certains trouvent qu’il s’agit d’une fonctionnalité et non d’un défaut, je ne saurais trop vous conseiller d’utiliser une méthode plus accessible :

Articles sur le même sujet

PS : Le respect de la vie privée sur internet est important : j'ai décidé d'échanger mon bouton Like de Facebook par un bouton Faire un don de Paypal car
Il n'y pas d'amour, il n'y a que des preuves d'amour (Jean Cocteau) ;) Merci d'avance.



35 commentaires pour “Menu à onglets avec javascript et css”

  1. Cap° dit :

    Très fort !!!! Cela évite de charger une nouvelle page quand on change de section dans le menu. Encore un script à mettre sous le coude, cela peu toujours servir.

  2. Benoit Raux dit :

    Ah bruno tu éxagére oublie pas que le gaucher c’est moi. En tout cas dans le genre bon tutoriel c’en est un ! On se refait des srcipt quand tu veux ;)

  3. br1o dit :

    Quand tu veux. Il me semble d’ailleurs que l’on doit triturer la librairie gd pour faire de belles images coulissantes ;)

  4. InidcaDesBois dit :

    Tient un spam de tracback. C’est le début de la célébrité br1o ;)

  5. Spy-Seth dit :

    je voudrais vous signalez un petit défaut sur ce script : les onglets sont in-modifiables si le javascript est désactivé.

    Lors de la conception de plusieurs sites j’ai étais confronté à se problème et durant mes recherches je suis tombé sur cette technique ( moncastel.9online.fr/ongl… ) qui me parait plus accessible car qu’il y ai ou pas de JS (ou de CSS) les différents onglets restent visualisable ;-)

  6. Merci pour avoir signalé ce petit souci et pour le lien qui propose une solution intéressante. C’est vrai que je n’avais pas pensé à l’accessibilité sur ce coup-là :( Mais suite à votre intervention, je vais me pencher sur la question pour rendre mon menu un peu plus universel. Pour défendre (un peu) la méthode que j’ai exposé, elle fonctionne sans css, et ne nécessite pas d’être chargée dans le body, ce qui peut présenter un avantage. A bientôt,

  7. Thierry dit :

    Hello, Très interessant mais je me posais la question de l’impact de l’utilisation des onglets tels que présentés ici sur le réferencement et sur le parcours de pages par les robots ! Une idée ?

  8. br1o dit :

    Salut, Ce menu, et tout ceux qui y ressemble, fonctionne globalement sur le principe du display: none; Une partie du contenu est masqué par défaut, tandis qu’une action permet de l’Afficher. Le fait que du contenu est masqué ne signifie pas qu’il n’existe pas dans la page, bien au contraire ! Et ce, contrairement au contenu ajaxisé qui est par définition chargé à la demande. A priori, donc, pas de soucis du côté de l’accessibilité du contenu masqué pour les robots. A priori, parce qu’étant donné qu’il est possible d’utiliser cette technique pour présenter un contenu différent aux robots et aux visiteurs humains, et ceci à moindre frais, un moteur comme Google pourrait, dans certaines circonstances, et après validation par une personne qualifiée, considérer le contenu masqué comme du cloaking (Arrgh! Beurk…)…

  9. zaito dit :

    Je dirais un grand bravo et un grand merci :) Code simple, efficace et facile à modeler tout comme je cherchais ! Vive le partage de sources :p

  10. br1o dit :

    Merci à toi zaito !

  11. anissou dit :

    Avan tout grd merci pour ce petit script partique et tres flexible. Cependant g un soucis. qd j’insere des pages sous les onglets avec des formulaire exple ‘mailto’ ou formulair avec script ca ne marche po…

  12. Vince dit :

    Est-il possible d’avoir la même chose mais pouvoir changer d’onglet sans cliquer, juste au passage de la souris ? Si non comment faire pour que lorsque je click la page ne remonte pas tout en haut, c’est pas trés agréable.

    Merci d’avance

  13. Bruno Bichet dit :

    @Vince > pour activer le menu au passage de la souris il suffit de remplacer l’appel de fonction « onclick » par « onmouseover » dans le lien.

    Pour éviter que la page en remonte en haut il faut mettre soit moins de texte (nan, j’rigole) soit essayer de changer le # de la cible du lien (dans le href= »# ») par un vrai lien, en ajoutant, un « return false » comme deuxième instruction afin d’éviter la propagation du lien. en gros (mais j’ai la flemme de tester) :

    <a href= »http://www.monsite.com/mapage.html » id= »_0″ class= »current » onmouseover= »multiClass(this.id);return false » alt= »menu1″>Accueil</a>

    Mais bon, il existe désormais une foultitude de menus à onglets basés sur jQuery qui sont plus intéressants en terme d’accessibilité et de mise en place dans la page.

    C’est notamment le cas de « tabs » qui est une extension jQuery disponible en tant qu’élément de UI : http://docs.jquery.com/UI/Tabs et la page de l’auteur : http://stilbuero.de/jquery/tabs_3/

  14. Vince dit :

    Merci pour ta réponse rapide… A vrai dire c’est vrai qu’il en existe surement des mieux mais celui la me convient parfaitement ! Penses-tu que niveau référencement ceux que tu me proposes sont mieux (moins néfaste etc).

    merci

  15. stevens dit :

    merci pour ce petit script que je trouve super. la chose qui m’a fait le choisir par rapport à d’autre c’est que lorsque javascript est désactivé ca affiche que le premier onglet et casse pas toute la mise en page pour autant ;)

  16. Bruno Bichet dit :

    @stevens > tu veux dire que c’est pas un défaut mais une fonctionnalité ? C’est cool et je t’en remercie ;)

    Bon, le problème, c’est que c’est quand même pas top alors que dans le même temps il existe des scripts comme idTabs (un plugin de jQuery) qui font la même chose en mieux : moins d’intrusion dans le code, fonctionnel sans javascript, etc.

    C’est d’ailleurs idTabs que j’utilise dans ma sidebar à gauche pour afficher les catégories ou les tags, tu peux tester c’est sans danger :)

    Voilà. J’avais envisagé de mettre à jour ce script, mais vu la pléthore de solutions bien mieux, je ne suis pas allé plus loin ^_^v

    Son grand intérêt aujourd’hui, c’est son aspect didactique.

  17. anthony dit :

    Bonjour, Géniale le source; super simple d’utilisation.

    Parcontre j’aurai souhaiter l’afficher plusieurs fois; A vrai dire je fais un tableau ou l’on peut cliquer sur chaque ligne, un clique sur une ligne agrandi la page et la je place le code source partager ici.

    Cela marche pour la premere ligne mais pas pour les autres…

    Auriez vous une idée? schtakmann@hotmail.fr pour plus de précision. merci d’avance ;)

  18. anthony dit :

    Bon bien j’ai reussi ! j’ai modifier la fonction javascript, donc j’ai plusieur ligne qui contienne toute 4 onglet :D Géniale ce bout de code !

  19. shyroki dit :

    Bonjour, tout d’abords bravo pour ce script, moi qui suit un humble amateur cela me permet de faire des choses bien pratique.

    Je me sert des onglets pour afficher différente vidéo, cependant je rencontre une grande difficulté avec IE, en mode fantôme il continu de charger les vidéos, ce qui prend inutilement de la bande passante.

    Si vous avez une solution?

  20. Bruno Bichet dit :

    @shyroki > Merci, je transmettrait à Benoît la part des remerciements qui le concerne ;)

    Dans ton cas et si j’ai bien compris ce que tu veux, il faut utiliser de l’Ajax pour ne charger tes vidéo que lorsqu’elles sont demandées.

    Comme je l’ai expliqué dans les commentaires plus haut, ce script est un peu obsolète par rapport à ce qui se fait par ailleurs. Même s’il peut encore rendre de bons et loyaux services ;)

    Je te conseille d’aller voir du côté de jQuery et plus particulièrement du plugin Tabs 3 qui propose une palanquée d’option dont celles dont tu auras besoins pour faire de l’Ajax.

  21. Karim dit :

    Bonjour !

    Merci pour ce script très pratique. Par contre j ai un soucis concernant le retour en arrière (je ne connais pas grand chose en javascript, désolé) : étant sur un onglet, je ne peux pas revenir sur l onglet précédent en cliquant sur « page précédente ». Si vous avez une idée sur le « comment faire ca ». Merci Karim.

  22. Bruno Bichet dit :

    @Karim > Il n’est pas possible de revenir sur l’onglet précédent avec le bouton page précédente du navigateur car le contenu de chaque onglet fait partie de la même page. Javascript n’y est donc pour rien !

    Toutefois (mais je ne vois pas vraiment l’intérêt) il est quand même possible d’arriver à ce résultat en créant autant de pages qu’il y a d’onglets et en mettant sur chaque page l’onglet en question en position « current »…

  23. Adrien dit :

    Hello,

    Ce script est très intéressant, mais comment faire pour réaliser un lien (depuis l’URL) vers un onglet (déjà ouvert) ? Le paramètre « id » étant géré par Javascript, je ne vois pas de moyen de pointer vers un des onglets sans passer par l’invocation « onclick ». . .

    Adrien

  24. neowdj dit :

    bonjour,

    je trouve ce script fort sympathique mais cepandant W3C\css me detect une erreur

    « #container .content La propriété _margin n’existe pas : -16px 0 0 0 « 

    pour ensuite ca me donne un problème d’affichage sous IE 6 et 7 sur les boutons

    voici ce que ca donne

    [lien externe] http://backup.ati06.com/ati/v2/

  25. Bruno Bichet dit :

    @Adrien: Ca serait intéressant, en effet. Malheureusement pour le moment, je ne vois pas.

    @neowdj: La propriété _margin est une sorte de « hack » pour ie. Pour bien faire, il faudrait placer cette propriété dans une CSS pour ie (ie.css, par ex.) et l’appeler dans la page web via les commentaires conditionnels.

    A l’époque, IE7 n’existait pas et il se peut qu’il réagisse différemment d’IE6. Toutefois, avec un peu de chance, il peut aussi réagir de manière standard. Donc, si tu fais une feuille de style spécifique à Internet Explorer indépendamment des versions, il faudra : cibler IE6 et IE7 avec un seul fichier CSS.

  26. Marc-André dit :

    Bonjour, en faisant une recherche pour les menus à onglet, je suis tombé rapidement sur ce site. C’est rare qu’on trouve aussi vite ce qu’on veut sur le web.

    Le script fonctionne à merveille. Un vrai petit bijou. Comme je suis sur OS X et que j’ai appris dernièrement que plusieurs de mes codes ne fonctionnent pas très bien sur Explorer, j’ai entrepris de changer les choses, croyant que mes tests, à partir de Safari et Firefox faussaient la donne. Je réalise ici ce dont j’entendais vaguement parler. Explorer c’est de la bulls…!

    Cependant, avant de l’installer sur ma page (très bientôt), j’ai fait tester votre script. Il semblerait qu’il fonctionne très bien sur Explorer maintenant. Avec ou sans la spécification pour Explorer dont vous faites mention ailleurs. La seule différence, les caractères sont plus gros et il semble impossible de les changer avec le code pour IE.

    Ce que j’apprécie c’est que ça fonctionne très bien avec les bases de données.

    Merci beaucoup!

  27. Fazio dit :

    Bonjour,

    toutes mes félicitation pour ce code. Il est super facile à utiliser!!!!

    Je me demandais juste, pourquoi lorsqu’on intègre ce code à l’interieur un’un autre « div », il y as des problème d’affichage..?

    url de l’image du bug d’affichage: http://www.killbabylonsound.com/images/001.JPG

    voici le code css du « div » en question:

    corps

    { margin-left: 200px;

    padding: 5px; font-family: Arial, « Arial Black »; color: #242424; background-color: #FFFFFF; padding-left: 20px; background-repeat: repeat-x;

    }

    Merci pour vos réponse. Amicalement. Fazio

  28. Bruno Bichet dit :

    @Fazio: Bonjour, je n’ai pas identifié quel était le pb en question sur l’image.

  29. Sun Location dit :

    Super ces script , !

    Article intéressant :) Merci

  30. La Faucheuse dit :

    C’est vrai que pour un bon tuto, s’en est un. Très facile à suivre et à utiliser ! Merci

  31. Hanane dit :

    Bonjour,

    Merci bien pour le script ,les tutoriels et tout le site . mais j’ai un petit souci :lorsque j’intègre un formulaire dans le deuxième ou le troisième onglet et je clique sur le bouton :ajouter par Exemple. automatiquement je suis dans le premier onglet. est ce que ce script peut être modifié pour faire des formulaire d’ajout,de modif. ,etc.

    Merci encore une fois.

  32. Paco dit :

    Bravo et merci, parfait pour de l’embarqué, lequel je suis actuellement en train de bosser. Cependant, l’id commençant par un underscore n’est pas recommandé car utilisé principalement pour du XML. Cela n’empêche en rien de fonctionner, bien sûr, mais le remplacer par une lettre quelconque par exemple fonctionne aussi bien. En tout cas super script, très utile quand on ne peut pas utiliser jQuery. Merci.

  33. Marco dit :

    Bonjour,

    Auriez-vous une petite idée de comment faire pour qu’après un refresh de la page on ne soit pas rediriger vers l’onglet 0 « current »?

    Car j’ai insérer un formulaire de contact dans un onglet mais si l’utilisateur fait un fausse manip (oubli e-mail, test sécurité incorrect, etc…) la page se recharge sur l’onglet défini en « current on » si on re-clique sur l’onglet contact l’erreur est affiché (oubli e-mail, etc…)

    D’avance merci

  34. ALI dit :

    Parfait, mais ca marche pas avec IE.

  35. Ecook dit :

    Script simplissime et tuto très explicite : Bravo Je tombe sur un os ! Dans :

    <

    div id= »menu_2″ class= »off content » >, le fait que la class soit off interdit l’affichage des vidéo html5 ! je me retrouve avec un cadre noir :-) Merci

Laissez un commentaire

Vous pouvez utiliser les balises HTML suivantes : <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Les commentaires sont publiés sous votre pleine et entière responsabilité et ne doivent pas contrevenir aux lois et règlementations en vigueur. Les propos racistes ou antisémites, diffamatoire ou injurieux, divulguant des informations fausses, relatives à la vie privée d'une personne ou utilisant des oeuvres protégées par les droits d'auteurs ne sont pas les bienvenus et seront modérés sans modération.

Merci d'être constructif et n'oubliez pas : « sans la liberté de ramer il n'est point d'éloge flotteur ! »



Colophon

CSS & Webdesign est une publication irrégulomadaire à tendance hebdomadaire
éditée par Bruno Bichet qui carbure à WordPress et au café équitable.
Tous droits réservés © 2006 - 2011.

Contactez l'auteur du site