Bonjour tout le monde,

Je réalise un site qui sera responsive. Ce site comporte un menu déroulant. Fonctionnel sur ordinateur, le sous-menu s'affiche au survole. Comme les téléphones n'ont pas cette possibilité, je voudrais que "si la taille est inférieur à..." le sous menu s'affiche qu'au moment où on cliquera sur l'onglet.

Mon code HTML :
Code html : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<nav id="site-navigation" class="main-navigation" role="navigation" >
 
<div class="menu-main-menu-container">
<ul id="menu-main-menu" class="menu-main">
<br>   <li>
      <a href="#">Accueil</a><br>   </li>
 
   <li class="menu-item-has-children">
      <a href="#">Info</a>
         <ul class="sub-menu">
            <li class="menu-item-object-page"><a href="#">Rubrique 1</a></li>
        <li class="menu-item-object-page"><a href="#">Rubrique 2</a></li>
         </ul>
   </li>
 
</ul>
</div>
</nav>

Mon code CSS :

Code css : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
@media (max-width: 767px){ 
.main-navigation li a, .main-navigation li, .main-navigation li ul {
    display: block;
    position: relative;
}
}

Et le code JS :
J'ai bien essayé de jouer avec le onclick dans la function navi(), mais mes compétences faiblardes en JS ne m'ont pas permis de réussir...

Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<script language="Javascript">
// navigation
    var n = document.getElementById('site-navigation');
    n.classList.add('is-closed');
 
    function navi() {
        // si plus que, on affiche 
        if (window.matchMedia("(max-width: 767px)").matches && document.getElementById("toggle-nav")==undefined) {          
            n.insertAdjacentHTML('afterBegin','<button id="toggle-nav"><i class="visually-hidden">Déplier/replier le menu</i></button>');
            t = document.getElementById('toggle-nav');  
            t.onclick=function(){ n.classList.toggle('is-closed');}
        }
        // si plus grand que, on enlève
        if (window.matchMedia("(min-width: 768px)").matches && document.getElementById("toggle-nav")) {
            document.getElementById("toggle-nav").outerHTML="";
        }
    }
    navi();
    // quand on redimensionne
    window.addEventListener('resize', navi);
</script>
Quelqu'un a une petite idée?
Merci d'avance!