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

par manu

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 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 :
    1. $(function() {
    2. $(".menu-trigger").on("click", function(){
    3. $(".menu").slideToggle();
    4. });
    5. });
  • 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" :
    1. [(#REM) 6. Vos scripts ]
    2. [<script src="(#CHEMIN{javascript/menu_anime.js})" type="text/javascript"></script>]
  • 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 :
    1. @media (max-width: 600px) {
    2. /* Menu visible d'un clic sur l'icone */
    3. .menu-trigger {
    4. position:absolute;
    5. top: 175px;left: 5px;
    6. display:block; width:45px; height:20px;
    7. cursor:pointer;
    8. visibility:visible;
    9. background-image:url(img/menu.png);
    10. }
    11.  
    12. /* Place le menu au-dessous de l’icone */
    13. .menu {
    14. position: relative;
    15. top:0px; width: 190px; z-index: 1;
    16. visibility: visible; display: none;
    17. }
    18. }
  • 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 :
    1. ..................
    2. <div class="menu-trigger"></div>
    3. <div class="menu">
    4. ..................