Menu à onglets avec Javascript et CSS fait partie des articles les plus lus de ce blogzine. Mais la solution présentée n’est pas un modèle d’accessibilité car elle ne fonctionne plus correctement si Javascript est désactivé. Dans ce cas, le 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 préconise deux scripts bien plus accessibles et efficaces : idTabs de Sean Catchpole et domtab de Chris Heilmann.
Avant de choisir un système de menus à onglets, il est important de vérifier les trois points suivants :
Poids du script — généralement faible pour ce genre de script, il néanmoins penser à additionner les tailles de tous les petits scripts déjà installés.
idTabs ->
10 ko+ jQuery ->31 ko=41 ko. Si vous devez juste ajouter un menu à onglets sur votre site, ce poids est rédhibitoire.domtab ->
10 ko. C’est déjà beaucoup mieux, et par rapport à idTabs, vous pourrez encore installer plusieurs scripts intéressants avant d’arriver à41 ko.
Ceci dit, l’appétit vient en mangeant et le nombre de scripts à tendance à s’allonger, de sorte que l’investissement en jQuery est très vite rentabilisé.
Comportement quand javascript n’est pas activé — Ces deux scripts se dégradent élégamment en l’absence de Javascript. Comme l’affichage des onglets est géré par la feuille de style CSS ils restent en place ; les éléments masqués au départ s’affichent simplement les uns sous les autres.
Balisage HTML, classes CSS et identifiants nécessaires — Le fonctionnement de ses deux scripts suit le même principe : il faut identifier les zones où le script va agir (identifiants, classes) et ajouter des ancres internes vers lesquelles les liens des onglets pointeront.
Commençons par idTabs »
7 Comments
Tiens tu n’aurais pas une erreur dans ton template single.php par hasard, car j’ai pas de titre dans le navigateur pour ton article :s Je peux te faire un screen si tu veux
J’ai envie de dire qu’ils sont pourris tous les deux ! Je m’explique : le clic sur les liens ne fait pas afficher les ancres dans la barre d’adresse… Pourtant l’intérêt de travailler avec les ancres est que n’importe qui puisse copier l’adresse qui redirigera vers l’onglet approprié. Bref c’est une fonctionnalité très simple à ajouter grâce à location.hash, alors ajoutez là !
@Jérémy: C’est exact, je savais bien que All in One SEO était une vraie m…. catastrophe, mais là j’en ai la preuve (sous réserve que l’erreur ne vienne pas d’un mauvais réglage du bouzin venant de ma part) :p
@Sylvain: C’est l’occasion de demander aux intéressés d’ajouter cette idée à leur todo list !
Merci pour les tutoriels,
J’ai plutôt l’habitude de développer une solution maison à chaque fois. Mais, ce serait bien de changer certaines habitudes
On m’avait conseillé nanotabs , pour sa légèreté : 2Ko! Après, je suis pas un expert, mais il me semblait fonctionner très bien… Qu’en penses-tu ?
Par contre, il n’a pas l’air de pouvoir fonctionner sans le JavaScript. Alors, je m’étais inspiré de cette solution et de cet excellent tutoriel pour créer des onglets 100% CSS.
Bonne journée, Thoams
C’est réparé à ce que je vois :p Perso aucun soucis avec All In one… D’où venait le soucis?
@Thoams : Nanotab est le nouveau projet de celui qui a fait idTabs. J’ai juste fait une petite note dessus il y a quelques jours parce que je ne l’ai pas testé.
Avant de découvrir jQuery, je bidouillais surtout des trucs à base de Suckerfish, (quoique il existe une version de Suckerfish basée sur jQuery si ma mémoire est bonne). Maintenant, je rentabilise les 30ko de jQuery
@Jérémy : J’ai fait un truc à la main dans le
headpour mettre des titles sur les billets seuls.Je ne sais pas pourquoi AiOSEO ne veux pas m’écrire ce satané
title… Enfin, c’est pas grave car j’ai surtout besoin des descriptionss uniques par billet, et là ça fonctionne.Du coup, je me suis rendu compte que le plus important pour moi dans ce plugin pouvait être fait avec un ou deux Customs fields… M’enfin, au moins je le sais pour la prochaine installation
Tient, moi j’ai résolu mon problème, j’ai réussit à mettre mon tableau, mais là je viens de trouver un plugin intéressant pour les wordpresseur qui ne veulent pas trop mettre la main à la pâte… http://www.geekeries.fr/articles/sidebar-tabs-onglet-sidebar-wordpress/
One Trackback
[...] un onglet et la mise en place de liens suivant et précédent pour accéder aux onglets. Voir mon comparatif entre DOMTab et idTabs pour en savoir [...]