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 :
Pour ma part j’utilise jQuery accompagné du plugin idTabs que vous pouvez voir à l’œuvre dans les menu à onglets en haut de ce blog.
Je vous propose de lire mon introduction à jQuery et de jeter un œil sur les 240 plugins pour jQuery.
Voir aussi cet article qui fait le tour sur les scripts idTabs et domtab pour les tabs menus.
Et s’il ne devait rester qu’un seul tutoriel pour faire des menus à onglets…
26 participations à l'article
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.
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 ;)
Quand tu veux. Il me semble d’ailleurs que l’on doit triturer la librairie gd pour faire de belles images coulissantes ;)
Tient un spam de tracback.
C’est le début de la célébrité br1o ;)
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 ;-)
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,
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 ?
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…)…
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
Merci à toi zaito !
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…
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
@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/
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
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 ;)
@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.
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 ;)
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 !
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?
@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](http://jquery.com/) et plus particulièrement du [plugin Tabs 3](http://stilbuero.de/jquery/tabs_3/) qui propose une palanquée d’option dont celles dont tu auras besoins pour faire de l’Ajax.
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.
@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”…
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
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/
@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.
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!