[RESOLU] menu déroulant qui fonctionne en tactile

menu déroulant qui fonctionne en tactile [RESOLU] - Javascript/Node.js - Programmation

Marsh Posté le 30-12-2018 à 21:09:52    

:hello: tout le forum.
 
J'ai besoin de votre aide.
 
Je souhaite réaliser un menu déroulant qui fonctionne en tactile (surface pro 4 et Microsoft Edge)
 
J'ai fait des recherches et j'en ai trouvé qui me conviendrait ici(codepen.io) mais je n'arrive pas à le coder correctement.
 

Code :
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.  <meta charset="utf-8"/>
  5.  <link rel="stylesheet" href="/css/menu.css"/>
  7.  <script type="text/javascript">
  9.   (function() {
  10.     var tabMenu = document.querySelectorAll('.deroule');
  11.     var tabD = document.querySelectorAll('ul ul');
  12.     function deroule(e){
  13.    e.stopPropagation();
  14.    obj = this.querySelector('ul');
  15.    if(!this.open){
  16.      tabMenu.forEach(ferme);
  17.      obj.style.display = "block";
  18.      this.open = true;
  19.    }else{
  20.      obj.style.display = "none";
  21.      this.open = false;
  22.    }
  23.     }
  24.     var ferme = function(obj,i){
  25.    tabD[i].style.display = "none";
  26.    obj.open = false;
  27.     }
  28.     var init = function(obj){
  29.    obj.addEventListener("click",deroule);
  30.    obj.open = false;
  31.     }
  32.     tabMenu.forEach(init);
  33.     window.addEventListener("click",function(){
  34.    tabMenu.forEach(ferme);
  35.     });
  36.     window.addEventListener("scroll",function(){
  37.    tabMenu.forEach(ferme);
  38.     });
  39.   })();
  41.  </script>
  43.  <title>test.php</title>
  44. </head>
  45. <body>
  46.  <nav>
  47.    <ul>
  48.   <li><a href="#">Accueil</a></li>
  49.   <li class="deroule"><a href="#">About <span class="fleche"></span></a>
  50.     <ul>
  51.    <li><a href="#" onclick="alert(2)">about 1</a></li>
  52.    <li><a href="#">about 2</a></li>
  53.    <li><a href="#">about 3</a></li>
  54.     </ul>
  55.   </li>
  56.   <li class="deroule"><a href="#">Services <span class="fleche"></span></a>
  57.     <ul>
  58.    <li><a href="#">services 1</a></li>
  59.    <li><a href="#">services 2</a></li>
  60.    <li><a href="#">services 3</a></li>
  61.    <li><a href="#">services 4</a></li>
  62.    <li><a href="#">services 5</a></li>
  63.     </ul>
  64.   </li>
  65.   <li><a href="#">Blog</a></li>
  66.   <li><a href="#">Contact</a></li>
  67.    </ul>
  68.  </nav>
  69.  <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente cumque tenetur recusandae. Non deserunt illo cupiditate minus quae magnam dolor doloribus ad exercitationem ipsam molestiae eius, vitae aut animi molestias?</p>
  70. </body>
  71. </html>


 
Quand je le test avec chrome sur mon PC de bureau, le menu s'affiche correctement mais quand je clic sur About ou Service le menu ne se déroule pas.
 
Merci pour votre aide.


Message édité par kewan le 31-12-2018 à 14:39:02
Reply

Marsh Posté le 30-12-2018 à 21:09:52   

Reply

Marsh Posté le 31-12-2018 à 13:53:16    

Bonjour,

 

Il manque un point-virgule ligne 27 et 31, je n'ai pas testé le code mais cela peut suffire à le faire dysfonctionner.


Message édité par MaybeEijOrNot le 31-12-2018 à 13:56:01

---------------
C'est en écrivant n'importe quoi qu'on devient n'importe qui.
Reply

Marsh Posté le 31-12-2018 à 14:26:19    

:hello: merci.
 
j'ai rajouter les deux points-virgule.
 
mais ça fonctionne toujours pas.

Reply

Marsh Posté le 31-12-2018 à 14:38:41    

J'ai trouvé pourquoi ça ne fonctionne pas en affichant le code source de la page https://codepen.io/salsacobo/pen/zKavVd.
 
Il faut mettre le script après le code html du menu.
 
Par contre si quelqu'un peut m'expliquer pourquoi?
 

Code :
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.  <meta charset="utf-8"/>
  5.  <link rel="stylesheet" href="/css/menu.css"/>
  6.  <title>test.php</title>
  7. </head>
  8. <body>
  9.  <nav>
  10.   <ul>
  11.    <li><a href="#">Accueil</a></li>
  12.    <li class="deroule"><a href="#">About <span class="fleche"></span></a>
  13.     <ul>
  14.      <li><a href="#" onclick="alert(2)">about 1</a></li>
  15.      <li><a href="#">about 2</a></li>
  16.      <li><a href="#">about 3</a></li>
  17.     </ul>
  18.    </li>
  19.    <li class="deroule"><a href="#">Services <span class="fleche"></span></a>
  20.     <ul>
  21.      <li><a href="#">services 1</a></li>
  22.      <li><a href="#">services 2</a></li>
  23.      <li><a href="#">services 3</a></li>
  24.      <li><a href="#">services 4</a></li>
  25.      <li><a href="#">services 5</a></li>
  26.     </ul>
  27.    </li>
  28.    <li><a href="#">Blog</a></li>
  29.    <li><a href="#">Contact</a></li>
  30.   </ul>
  31.  </nav>
  33.  <p>chapitre</p>
  35.  <script>
  36.   (function(){
  37.    var tabMenu = document.querySelectorAll('.deroule');
  38.    var tabD = document.querySelectorAll('ul ul');
  40.    function deroule(e){
  41.     e.stopPropagation();
  42.     obj = this.querySelector('ul');
  43.     if(!this.open){
  44.      tabMenu.forEach(ferme);
  45.      obj.style.display = "block";
  46.      this.open = true;
  47.     }
  48.     else{
  49.      obj.style.display = "none";
  50.      this.open = false;
  51.     }
  52.    }
  54.    var ferme = function(obj, i){
  55.     tabD[i].style.display = "none";
  56.     obj.open = false;
  57.    };
  59.    var init = function(obj){
  60.     obj.addEventListener("click", deroule);
  61.     obj.open = false;
  62.    };
  64.    tabMenu.forEach(init);
  66.    window.addEventListener("click", function(){
  67.     tabMenu.forEach(ferme);
  68.    });
  70.    window.addEventListener("scroll", function(){
  71.     tabMenu.forEach(ferme);
  72.    });
  73.   })();
  74.  </script>
  75. </body>
  76. </html>


Message édité par kewan le 31-12-2018 à 14:47:22
Reply

Marsh Posté le 31-12-2018 à 15:02:37    

En fait, dans ta première version, le javascript est chargé et exécuté avant ton HTML, du coup ça ne fonctionne pas. Soit tu ajoutes ton script en effet en fin de HTML et comme ça il est interprété après, soit tu demandes de l’exécuter une fois le HTML chargé.

 

Perso je mets toujours mon js dans une fonction que j'appelle avec onLoad="mafonction()" dans la balise body, ainsi le js est chargé avant le HTML mais exécuté qu'une fois que le HTML est chargé. Je ne sais pas si c'est la meilleure méthode à utiliser mais au moins je n'ai jamais de surprise.


Message édité par MaybeEijOrNot le 31-12-2018 à 15:03:13

---------------
C'est en écrivant n'importe quoi qu'on devient n'importe qui.
Reply

Marsh Posté le 31-12-2018 à 15:10:02    

Le pourquoi, c'est parce que tu ne déclenchais pas l'exécution du script au bon moment.
Parce que s'il s'exécute trop tôt...
 

Code :
  1. <!DOCTYPE html>
  2. <html>
  3.   <head>
  4.     <meta charset="utf-8"/>
  5.     <link rel="stylesheet" href="/css/menu.css"/>
  6.     <script type="text/javascript">
  7.       window.onload = function() {
  8.   var tabMenu = document.querySelectorAll('.deroule');
  9.   var tabD = document.querySelectorAll('ul ul');
  10.   function deroule(e){
  11.       e.stopPropagation();
  12.       obj = this.querySelector('ul');
  13.       if(!this.open){
  14.    tabMenu.forEach(ferme);
  15.    obj.style.display = "block";
  16.    this.open = true;
  17.       }else{
  18.    obj.style.display = "none";
  19.    this.open = false;
  20.       }
  21.   }
  22.   var ferme = function(obj,i){
  23.       tabD[i].style.display = "none";
  24.       obj.open = false;
  25.   }
  26.   var init = function(obj){
  27.       obj.addEventListener("click",deroule);
  28.       obj.open = false;
  29.   }
  30.   tabMenu.forEach(init);
  31.   window.addEventListener("click",function(){
  32.       tabMenu.forEach(ferme);
  33.   });
  34.   window.addEventListener("scroll",function(){
  35.       tabMenu.forEach(ferme);
  36.   });
  37.       };
  38.     </script>
  39.     <style>
  40.       /* reset */
  41.       *{
  42.   box-sizing: border-box;
  43.       }
  44.       ul{
  45.   list-style-type: none;
  46.   margin: 0;
  47.   padding: 0;
  48.       }
  50.       /* custom menu */
  51.       nav:after{
  52.   content: "";
  53.   clear: both;
  54.   display: block;
  55.       }
  56.       nav a{
  57.   display: block;
  58.   text-decoration: none;
  59.   white-space: nowrap;
  60.       }
  61.       nav ul ul{
  62.   background-color: #fff;
  63.   display: none;
  64.   position: absolute;
  65.   min-width: 100%;
  66.       }
  67.       nav>ul{
  68.   display: flex;
  69.       }
  70.       nav>ul>li{
  71.   position: relative;
  72.   margin: 1px;
  73.   flex-grow: 1;
  74.       }
  75.       nav ul ul li+li{
  76.   border-top: 1px solid white;
  77.       }
  78.       nav ul li a{
  79.   background-color: silver;
  80.   padding: 10px 20px;
  81.   color: black;
  82.   text-align: center;
  83.       }
  84.       nav>ul>li>a{
  85.   background-color: rgb(63,70,76);
  86.   color: white;
  87.       }
  88.       nav ul ul a{
  89.   background-color:  rgb(282,97,1);
  90.   color: white;
  91.       }
  92.       .fleche {
  93.   display: inline-block;
  94.   width: 0;
  95.   height: 0;
  96.   margin-left: 4px;
  97.   vertical-align: middle;
  98.   border-top: 6px solid;
  99.   border-right: 6px solid transparent;
  100.   border-left: 6px solid transparent;
  101.       }
  102.     </style>
  103.     <title>test.php</title>
  104.   </head>
  105.   <body>
  106.     <nav>
  107.       <ul>
  108. <li><a href="#">Accueil</a></li>
  109. <li class="deroule"><a href="#">About <span class="fleche"></span></a>
  110.   <ul>
  111.     <li><a href="#" onclick="alert(2)">about 1</a></li>
  112.     <li><a href="#">about 2</a></li>
  113.     <li><a href="#">about 3</a></li>
  114.   </ul>
  115. </li>
  116. <li class="deroule"><a href="#">Services <span class="fleche"></span></a>
  117.   <ul>
  118.     <li><a href="#">services 1</a></li>
  119.     <li><a href="#">services 2</a></li>
  120.     <li><a href="#">services 3</a></li>
  121.     <li><a href="#">services 4</a></li>
  122.     <li><a href="#">services 5</a></li>
  123.   </ul>
  124. </li>
  125. <li><a href="#">Blog</a></li>
  126. <li><a href="#">Contact</a></li>
  127.       </ul>
  128.     </nav>
  129.     <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sapiente cumque tenetur recusandae. Non deserunt illo cupiditate minus quae magnam dolor doloribus ad exercitationem ipsam molestiae eius, vitae aut animi molestias?</p>
  130.   </body>


 
En principe, c'est sur un window.onload que ça se fait (bonnes pratiques, toussa) quand c'est global à la fenêtre.
Bon, comme d'hab, mon indentation a été pétée par la mise en page du forum.
 
A+,


Message édité par gilou le 31-12-2018 à 15:22:17

---------------
There's more than what can be linked! --    Iyashikei Anime Forever!    --  AngularJS c'est un framework d'engulé!  --
Reply

Marsh Posté le 31-12-2018 à 17:49:22    

Merci pour vos explications,
 
ça fonctionne.  :jap:

Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed