Menu à onglets (tabs) — idTabs ou domTab ?

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 (tabs) — idTabs ou domTab ?

Article en plusieurs parties : 1 2 3

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 :

  1. 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é.

  2. 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.

  3. 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 »

Articles sur le même sujet

Article en plusieurs parties : Page suivante

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.



11 commentaires pour “Menu à onglets (tabs) — idTabs ou domTab ?”

  1. Jérémy dit :

    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 ;)

  2. Sylvain dit :

    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à !

  3. Bruno Bichet dit :

    @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 !

  4. Thoams dit :

    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 ;-)

  5. Jérémy dit :

    C’est réparé à ce que je vois :p Perso aucun soucis avec All In one… D’où venait le soucis?

  6. Bruno Bichet dit :

    @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 head pour 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 ;)

  7. Greg-J dit :

    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/

  8. […] 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 […]

  9. […] 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 […]

  10. […] pour lire ou relire Menu à onglets (tabs) — idTabs ou domTab ? pour un comparatif complet entre deux scripts au coude à coude pour faire des menus à […]

  11. […] pour lire ou relire Menu à onglets (tabs) — idTabs ou domTab ? pour un comparatif complet entre deux scripts au coude à coude pour faire des menus à […]



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