Menu-simple

Présentation

Permet d’afficher un menu simple (un seul niveau) à l’horizontale sur desktop et à la verticale sur mobile avec un bouton déclencheur d’ouverture/fermeture.

Si javascript n’est pas chargé dans le navigateur, sur mobile le bouton n’est pas affiché et le menu est affiché verticalement.

Accessibilité

Des attributs aria sur le bouton et le menu permettront aux utilisateurs pilotant une aide technique d’être informés de la nature de ces éléments.

Utilisation

Les attributs nécessaires à la dynamique d’ouverture/fermeture et à son accessibilité sont injectés par le script.

Pour que le script fonctionne correctement, le code html doit répondre à deux impératifs :

  1. L’élément déclencheur doit porter l’id toggle-menu,
  2. la liste constituant le menu doit porter la class nav-main-list.

En plus de ces attributs, on ajoutera la class nav-item sur chaque item de la liste.

Pour indiquer l’item actif du menu : ajouter la classe .is-active sur le lien concerné ainsi qu’un title reprenant son libellé plus "actif" : title="Acceuil - actif"

Script associé

Pour que ce module fonctionne, le script associé doit être appelé dans le pied de page, avant la fermeture du body.

Note : copier le script présent dans le module à l’endroit où sont rangés les autres scripts (en principe scripts/main/).

Exemple

<button id="toggle-menu" class="toggle-menu"><span aria-hidden="true"></span>Menu</button>

<nav role="navigation" class="nav-main" id="nav-main" aria-label="menu principal">
  <div class="container">
    <ul class="nav-main-list">
      <li class="nav-item"><a class="nav-link is-active" title="Accueil - actif" href="../index.html">Accueil</a></li>
      <li class="nav-item"><a class="nav-link" href="#visu">Identité visuelle</a></li>
      <li class="nav-item"><a class="nav-link" href="#typo">Contenus</a></li>
      <li class="nav-item"><a class="nav-link" href="#buttons">Boutons et formulaires</a></li>
      <li class="nav-item"><a class="nav-link" href="#composants">Composants du projet</a></li>
    </ul>
  </div>
 </nav>