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…