Menu déroulant : Affichage du sous-menu au clic sur l'onglet
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:
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:
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:
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!;)
