Barre de menu

Cette composante fournit une barre de menu interactive, avec possibilité de créer des sous-menus dans les mégamenus.

Vue d’ensemble

Chef de projet : Paul Jackson (@pjackson28)

Description

La navigation principale du site se présente sous forme de liens dans une barre de menu horizontale. Celle-ci facilite l’accès à tout moment aux principales options de navigation d’un site Web, peu importe leur emplacement sur celui-ci.

Avantages

  • Prend en charge les mégamenus
  • Est conforme à la norme WCAG 2.0 AA
  • Améliore l’accessibilité grâce à l’utilisation de WAI-ARIA
  • Adopte l’approche d’enrichissement d’images progressive
  • Les principaux éléments de navigation peuvent montrer aux utilisateurs l’ensemble du contenu et des services qui sont accessibles à partir du site.
  • Des éléments de navigation constamment visibles aident les utilisateurs à comprendre toute la portée du site et facilitent la navigation d’une section à une autre.
  • Les utilisateurs ne se rendent pas nécessairement à la page d’accueil d’un site lors de leur première visite (par exemple, quand ils suivent un lien à partir d’une page de résultats d’un moteur de recherche). La première visite d’un utilisateur peut commencer sur une page profondément imbriquée dans le site. Pour cette raison, des éléments de navigation constamment visibles peuvent aider à orienter l’utilisateur.
  • Une barre de menu horizontale convient bien aux éléments de navigation constamment visibles parce qu’elle prend très peu de la place qui peut autrement servir à présenter le contenu du site.

Utilisation recommandée

Mise en oeuvre

  1. Créer un élément div avec la classe wet-boew-menubar
  2. Facultatif : Lors de la création de mégamenus, ajouter la classe mb-mega à l'élément div créé précédemment. Nota : Les mégamenus peuvent soutenir un maximum de trois niveaux (p.ex., en-tête, liste et liste imbriquée).
  3. Facultatif : Si un lien à la page principale est exigé, ajouter le suivant à la fin du mégamenu :
    <div class="mb-main-link"><a href="#">Section 3 - Page principale</a></div>

Développement

La barre de menu exige les modules d’extension suivants d’un tiers :

Le code pour la barre de menu se trouve à plusieurs endroits dans le dossier source de la BOEW :

Indications

Navigation principale apparaissant sur chaque page d’un site Web.

Quand l’utiliser

Ce menu doit être utilisé dans les sites Web du gouvernement du Canada.

Affichage

La barre de navigation horizontale se présente sous forme d’une seule rangée d’éléments, placée en haut de page, au-dessus du contenu du site. Le nom des éléments de navigation dans la barre de menu horizontale ne doivent pas s’étendre sur deux lignes.

Sur la page d’accueil, chaque élément dans la barre de navigation a la même apparence. On accole un triangle inversé aux éléments menant à des fonctionnalités de navigation secondaire, ce qui indique que lorsqu’un curseur plane au-dessus de l’élément, un autre menu sera activé.

Quand le curseur passe au-dessus d’un élément de navigation, celui-ci est souligné et la couleur d’arrière-plan change. Sur les pages autres que la page d’accueil, l’élément sélectionné est mis en évidence visuellement par la couleur d’arrière-plan.

Veuillez lire les spécifications techniques pour la barre de navigation horizontale prescrites par le Programme de coordination de l’image de marque.

Fonctionnement

L’article du menu pour l’article qui est actuellement actif n’est pas lié lorsqu’il est sélectionné. Ne liez pas l’article qui mènerait à la page sur laquelle l’utilisateur se trouve. Exception – si le menu de navigation horizontale est doté d’une navigation secondaire, celui-ci est déclenché même à partir de la page ciblée par l’article qui figure au menu.

Contenu

Les éléments du menu principal de navigation horizontale doivent décrire l’étendue de ce qui est offert sur le site. La barre horizontale peut contenir entre trois et douze éléments, en fonction de la longueur du nom de chacun. Les éléments de menu devraient être assortis de noms courts et clairs, qui décrivent efficacement l’ensemble de ce qui est offert dans la section.

La conception d’une architecture de l’information efficace est essentielle pour la mise en œuvre de menus de navigation efficaces. Les exercices d’essai de l’organisation de l’information comme le tri des cartes peuvent aider à choisir et à mettre à l’essai les noms accolés aux sections d’un site. Ces exercices doivent être effectués dans les deux langues officielles : un terme qui décrit une section dans une langue ne sera pas forcément la traduction littérale du terme utilisé dans l’autre langue. L’architecture de l’information proposée et le nom des éléments de navigation que celle-ci prévoit doivent faire l’objet d’essais de facilité d’emploi avant d’être mis en œuvre sur votre site. Parmi les éléments à vérifier, notons les plateformes et appareils divers, notamment les appareils mobiles et les interfaces tactiles.

Contrairement à ce qui se produit avec une barre de navigation verticale, l’utilisateur doit pouvoir voir toute la barre de navigation horizontale en tout temps (puisque l’utilisateur ne s’attendra pas à devoir défiler vers la droite). Contrairement à ce qui se produit avec une barre de navigation verticale, une barre de navigation horizontale n’est pas facilement en mesure de prendre de l’expansion si d’autres éléments de menu sont requis. Pour cette raison, veuillez choisir attentivement quels éléments devraient figurer dans le menu.

Planifier simultanément une version de la barre de navigation horizontale dans chaque langue officielle, pour éviter de rencontrer des problèmes parce que les traductions sont plus longues que prévu.

Tous les éléments du menu doivent mener vers une page du site. La barre de menu horizontale ne devrait pas contenir d’hyperliens vers des pages à l’extérieur du site en question.

Références

  • Gube, Jacon. Module Tabs in Web Design: Best Practices and Solutions. Smashing Magazine, June 24, 2009. Mon. 21 Nov. 2011.
  • Lazaris, Louis. The Case Against Vertical Navigation. Smashing Magazine, Jan. 11, 2010. Mon. 21 Nov. 2011.
  • Horizontal Navigation Menus: Trends, Patterns and Best Practices. Smashing Magazine, Sept. 7, 2009. Mon. 21 Nov. 2011.
  • Outing, Steve and Laura Ruel. The Best Eyetrack III: What We Saw When We Looked Through Their Eyes. Eyetrack !!!, 2004. Mon. 21 Nov. 2011.
  • Ross, Tom. Tabbed Navigation — How To Do It Right. PSDFan.com, Oct. 13, 2010. Mon. 21 Nov. 2011.
  • van Welie, Martijn. Double Tab Navigation. Welie.com, 2008. Mon. 21 Nov. 2011.
  • Main Navigation. Welie.com, 2008. Mon. 21 Nov. 2011.
  • Wroblewski, Luke. The History of Amazon’s Tab Navigation. Lukew.com, May 7, 2005. Mon. 21 Nov. 2011.
  • Yahoo! Inc. Navigation Tabs. Yahoo! Developer Network, July 15, 2009. Mon. 21 Nov. 2011.

Problèmes connus

  • À l’heure actuelle, il n’existe aucun problème technique connu.
  • Les structures de menu doivent faire l’objet d’essais de facilité d’emploi avant d’être mises en œuvre. Des techniques comme le tri des cartes peuvent contribuer à créer des menus faciles à utiliser.

À venir

  • Utilisation des éléments HTML5, si possible
  • Améliorer l’affichage sur les appareils mobiles

Historique des versions

Documentation connexes