Categories
Marketing

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.

menu deroulant ecran tactile

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.

sous menu

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.

Un menu déroulant pour écran tactile est une interface utilisateur interactive qui permet aux utilisateurs de sélectionner des options ou des actions en touchant l’écran de leur appareil, ce qui fait apparaître un menu avec des choix supplémentaires.

Lorsqu’un utilisateur touche l’élément déclencheur, comme un bouton ou une flèche, un menu apparaît à l’écran, présentant les options disponibles. L’utilisateur peut alors sélectionner l’option souhaitée en touchant l’écran.

Les menus déroulants pour écran tactile sont couramment utilisés dans les applications mobiles, les sites Web adaptés aux mobiles et les dispositifs à écran tactile, tels que les tablettes et les smartphones.

  • Facilité d’utilisation : Ils sont intuitifs et conviviaux pour les utilisateurs.
  • Gain d’espace : Ils permettent d’économiser de l’espace à l’écran.
  • Navigation rapide : Ils offrent une navigation fluide et rapide.