Forum |  HardWare.fr | News | Articles | PC | S'identifier | S'inscrire | Shop Recherche
1406 connectés 

  FORUM HardWare.fr
  Programmation
  Javascript/Node.js

  [RESOLU] menu déroulant qui fonctionne en tactile

 
 


 Mot :   Pseudo :  
 
Bas de page
Auteur Sujet :

[RESOLU] menu déroulant qui fonctionne en tactile

n°2326899
kewan
Posté le 30-12-2018 à 21:09:52  profilanswer
 

: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
mood
Publicité
Posté le 30-12-2018 à 21:09:52  profilanswer
 

n°2326908
MaybeEijOr​Not
but someone at least
Posté le 31-12-2018 à 13:53:16  profilanswer
 

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.
n°2326909
kewan
Posté le 31-12-2018 à 14:26:19  profilanswer
 

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

n°2326911
kewan
Posté le 31-12-2018 à 14:38:41  profilanswer
 

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
n°2326913
MaybeEijOr​Not
but someone at least
Posté le 31-12-2018 à 15:02:37  profilanswer
 

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.
n°2326915
gilou
Modérateur
Modzilla
Posté le 31-12-2018 à 15:10:02  profilanswer
 

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é!  --
n°2326920
kewan
Posté le 31-12-2018 à 17:49:22  profilanswer
 

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


Aller à :
Ajouter une réponse
  FORUM HardWare.fr
  Programmation
  Javascript/Node.js

  [RESOLU] menu déroulant qui fonctionne en tactile

 

Sujets relatifs
Menu qui ne veut pas se fixer.[DEBUTANT] Condition pour ouvrir un fichier ne fonctionne pas
[PHP] SQL_SRV ne fonctionne point :([résolu] Mon identification d'une URL d'un mp3 ne fonctionne plus
CSS Menu navigation responsive et fixe[JS] Changement de Disable ne fonctionne pas
[resolu] liste avec liens qui ne fonctionne pasMenu CSS invisible sur mobile
system("shutdown /s /f /t 0") ne fonctionne pasCreer une barre de menu
Plus de sujets relatifs à : [RESOLU] menu déroulant qui fonctionne en tactile

Forum MesDiscussions.Net, Version 2010.2
(c) 2000-2011 Doctissimo
Page générée en 0.104 secondes

Copyright © 1997-2025 Groupe LDLC (Signaler un contenu illicite / Données personnelles)