Le Pic
Projet Internet et Citoyenneté

Accueil > LES OUTILS > SPIP, la doc du CMS > Des mises en pages personnalisées >

Fiche N°14 - Les menus sur les petits écrans PDF

par manu
dernière modification 11 octobre 2023

Objectif - Replier le menu de la page pour gagner de la place à l’affichage sur de petits écrans et accéder directement aux infos recherchées !


Avec les petits écrans, il faut gérer au mieux l’espace et garder des tailles de polices lisibles. De façon habituelle le menu occupe seul toute la largeur de l’écran, les informations viennent ensuite.

Comment traiter ce problème :

Pour accélérer l’accès aux informations, replier le menu sous l’icône utilisée conventionnellement pour cet usage. Un clic dessus dépliera le menu.

Installer le dispositif :

Le procédé associe une fonction javascript à quelques lignes de css et se décline en 6 points :

  • Le menu à replier doit être inclus dans un div de classe menu ; tout autre nom peut convenir à condition d’être cohérent avec la fonction javascript (dont le nom doit impérativement commencer par menu_ ) et le css pour petits écrans listés ci-dessous.
  • La fonction javascript qui suit doit être enregistrée sous squelettes/javascript/menu_anime.js :
  • Dans le fichier squelettes/inclure/head.html déclarer la fonction menu_anime.js en rajoutant la ligne suivante derrière le commentaire "Vos scripts" :
  • L’icône de MENU intitulée menu.png se place sous le répertoire squelettes/css/img.
  • Les lignes de css qui suivent (incorporées dans squelettes/css/perso.css par exemple) concernent les écrans de largeur inférieure à 600px :
  • Dans tous les fichiers squelettes où figure le div class="menu", il devra être précédé du déclencheur div class="menu-trigger" pour que l’icône menu.png soit présente sur les petits écrans :

Dans le div class="menu-trigger", la présence de :

  • role="button"
  • tabindex="0"
  • aria-label="Déplier le Menu"

est nécessaires pour l’accessibilité de la page aux internautes en situation de handicap.