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...
Quelqu'un a une petite idée?
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>
Merci d'avance!![]()
Partager