Menu déroulant pour écran tactile

Ne perdez pas vos internautes en mode tactile. Nous vous proposons donc un menu ergonomique qui permet d’accéder au liens qui déroulent même sur les tablettes ou les téléphones mobiles.

Commençons par mettre en place la structure HTML :

<nav>
  <ul>
    <li><a href="#">Accueil</a></li>
    <li class="deroule"><a href="#">About <span class="fleche"></span></a>
      <ul>
        <li><a href="#" onclick="alert(2)">about 1</a></li>
        <li><a href="#">about 2</a></li>
        <li><a href="#">about 3</a></li>
      </ul>
    </li>
    <li class="deroule"><a href="#">Services <span class="fleche"></span></a>
      <ul>
        <li><a href="#">services 1</a></li>
        <li><a href="#">services 2</a></li>
        <li><a href="#">services 3</a></li>
        <li><a href="#">services 4</a></li>
        <li><a href="#">services 5</a></li>
      </ul>
    </li>
    <li><a href="#">Blog</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</nav>

Un menu n’est rien d’autre qu’une liste de liens. Et pour créer un sous-menu, il suffit seulement d’imbriquer une liste dans une autre liste. Par ailleurs, la balise <span class="fleche"></span> sera utilisée pour éditer la flèche du bas pour les liens contenant des sous-liens.

Présentons maintenant tout ceci avec le CSS :

/* reset */
*{
  box-sizing: border-box;
}
ul{
  list-style-type: none;
  margin: 0;
  padding: 0;
}

/* custom menu */
nav:after{
  content: "";
  clear: both;
  display: block;
}
nav a{
  display: block;
  text-decoration: none;
  white-space: nowrap;
}
nav ul ul{
  background-color: #fff;
  display: none;
  position: absolute;
  min-width: 100%;
}
nav>ul{
  display: flex;
}
nav>ul>li{
  position: relative;
  margin: 1px;
  flex-grow: 1;
}
nav ul ul li+li{
  border-top: 1px solid white;
}
nav ul li a{
  background-color: silver;
  padding: 10px 20px;
  color: black;
  text-align: center;
}
nav>ul>li>a{
  background-color: rgb(63,70,76);
  color: white;
} 
nav ul ul a{
  background-color:  rgb(282,97,1);
  color: white;
}
.fleche {
  display: inline-block;
  width: 0;
  height: 0;
  margin-left: 4px;
  vertical-align: middle;
  border-top: 6px solid;
  border-right: 6px solid transparent;
  border-left: 6px solid transparent;
}

La mise en page du menu repose sur la technologie Flex et les positions. Nous cachons les sous-menu avec display : none.

Le rôle de Javascript est de faire apparaître ou disparaître les sous-menus selon le comportement de l’internaute :

• s’il clique sur un lien contenant un sous-menu caché : ce dernier doit s’afficher
• s’il clique à nouveau sur un lien contenant un sous-menu ouvert: ce dernier doit se cacher
• s’il clique sur un autre lien : le sous-menu précédemment ouvert doit se cacher
• s’il clique n’importe ou sur la page en dehors du sous-menu : ce dernier doit se fermer
• s’il ‘scrolle’ la page : le sous-menu précédemment ouvert doit se cacher

La programmation de cette algorithmie donne le code suivant :

(function() {
  var tabMenu = document.querySelectorAll('.deroule');
  var tabD = document.querySelectorAll('ul ul');
  function deroule(e){
    e.stopPropagation(); 
    obj = this.querySelector('ul');
    if(!this.open){
      tabMenu.forEach(ferme);
      obj.style.display = "block";
      this.open = true;
    }else{
      obj.style.display = "none";
      this.open = false;
    }
  }
  var ferme = function(obj,i){
    tabD[i].style.display = "none";
    obj.open = false;
  }
  var init = function(obj){
    obj.addEventListener("click",deroule);
    obj.open = false;
  }
  tabMenu.forEach(init);
  window.addEventListener("click",function(){
    tabMenu.forEach(ferme);
  });
  window.addEventListener("scroll",function(){
    tabMenu.forEach(ferme);
  });
})();

Testez par vous-même ce code sur Codepen.