Discussion :

[Vinuto]

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!

[Vinuto]

Je reviens vers vous, j'ai du nouveau...

Je suis arrivé à faire afficher au clic le sous menu. L'étape suivante était de rendre active cette fonction que lorsque le max-width = 767 px.

J'ai ajouté la première ligne ci-dessous, en dessous de 767px, mon menu est déjà tout déroulé, figé...

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
if (window.matchMedia("(max-width: 767px)").matches {	
$(document).ready( function () {
  $(".main-navigation li ul").hide();   
 
    $(".main-navigation li.menu-item-has-children > a").click( function () {
        // Si le sous-menu était déjà ouvert, on le referme :
        if ($(this).next("ul.sub-menu:visible").length != 0) {
            $(this).next("ul.sub-menu").slideUp("normal");
        }else {
            $(".main-navigation ul.sub-menu").slideUp("normal");
            $(this).next("ul.sub-menu").slideDown("normal");
        }
        return false;
    });    
 
} )
});

Je dois pas être bien loin de la solution mais là, c'est un nouveau blocage...

[SylvainPV]

Quand une règle CSS :hover change une propriété display d'un autre élément, les navigateurs mobiles "transforment" le hover en évènement tap. C'est à dire qu'une première pression compte pour un hover, et une seconde pour un clic.

Ce comportement a été implémenté par les éditeurs des navigateurs mobiles pour rendre compatibles les sites desktop au début du Web mobile, et le menu déroulant à hover était le problème numéro 1.

Je rajouterai que la largeur de l'écran n'est plus un bon indicateur d'une utilisation mobile. J'ai écrit tout un bouquin là-dessus, mais la section qui t'intéresse est consultable gratuitement ici : http://books.google.fr/books?id=XL7KAwAAQBAJ&pg=PA42