[Résolu] Montrer et cacher un menu et sous menu

Bonjour,

Je suis intégrateur débutant et j'ai besoin d'aide pour le javascript/jquery.

Mon but est d'afficher un menu lorsque l'on clique sur l'icone hamburger et d'afficher le sous menu uniquement lorsque l'on clique sur "services". Le sous-menu doit se fermer lorsque l'on clique sur "services" et sur la page. Et le menu se ferme uniquement lorque l'on clique sur l'icone hamburger. J'ai essayé plusieurs codes trouvés sur le net mais rien ne fonctionne et je suis débutant en jquey. Si quelqu'un pouvait m'aider ce serait vraiment sympa . Merci

J'ajoute le code html:

  <nav>
                <div class="nav_content">
                    <a href="index.html"><i class="fa fa-fire" aria-hidden="true">&nbsp;&nbsp;LOGO</i></a>
                    <span class="menu_toggle">&#9776;</span>
                    <ul class="main_nav">
                        <li><a href="#">Home</a></li><!--
                        --><li><a href="#">Products</a></li><!--
                        --><li><a href="#" class="sub_nav_btn">Services&nbsp;<i class="fa fa-caret-down" aria-hidden="true"></i></a>
                            <ul class="sub_nav" id="sub_nav2">
                                <li><a href="#">Engage</a></li>
                                <li><a href="#">Pontificate</a></li>
                                <li><a href="#">Synergize</a></li>
                            </ul>
                        </li><!--
                        --><li><a href="#">Contact</a></li>
                    </ul>
                </div>
            </nav><!--- END of nav --->

et mon code CSS:

/*---Main Nav ---*/

ul.main_nav{
    border-top: 1px solid grey;
    background-color: white;
    display: none;
    width: 100%;
    list-style-type: none;
    position: absolute;
    top: 45px;     
}

ul.main_nav > li:first-child{
    padding-top: 4px;
}

ul.main_nav > li > a{
    display: block;
    font-size: 0.8rem;
    text-decoration: none;
    color: black;
    padding: 11px 15px;
}

ul.main_nav > li > a:hover{
    color: #9ACD32;
}

/*--- Sub nav ---*/

ul.sub_nav{
    display: none;
    list-style-type: none;
}

ul.sub_nav > li > a{
    display: block;
    text-decoration: none;
    color: grey;
    font-size: 0.9rem;
    padding: 4px 25px;
}

ul.sub_nav > li > a:hover{
    color: black;
}

Bonjour,

Es-tu sûr d'avoir besoin de "Javascript/Jquery" pour réaliser un Simple Nav ?

L'effet Push ne te conviendrait pas ?

Ce que tu souhaites faire est faisable en cumulant le principe du menu hamburger en combinaison avec un effet de "spoiler" ou "lightbox".

Le principe consiste à utiliser dans la partie html des liens qui serviront d'interrupteurs activables au focus. L'avantage est que la mécanique se fait entièrement en Css via l'attribut :target en jouant sur la visibilité des blocs et elle ne nécessite pas que JS soit activé.

Ca veut dire quoi l'effet de "spoiler" ou "lightbox" ?

Est-ce que je pourrais vraiment afficher et cacher le menu avec un seul lien?

Je pense qu'il faudra du JS pour fermer le sous-menu.

J'ai des doutes mais je vais essayer de coder.

Ah , je vois! Bien pensé!

Comment faire maintenant pour fermer le sous-menu "services" lorsque je clique sur la page? Et imaginons que j'ai un menu sans sous-menu que je veux fermer lorsque je clique sur la page ?

Quelle serait la fonction pour le premier scénario?

Quelle serait la fonction pour le deuxième scénario?

Merci.

allan00958 a écrit :
Comment faire maintenant pour fermer le sous-menu "services" lorsque je clique sur la page? Et imaginons que j'ai un menu sans sous-menu que je veux fermer lorsque je clique sur la page ?

Je n'ai pas bien compris ta question... quand tu cliques sur un des liens de la nav ou quand tu cliques n'importe où sur la page ?

Quand on clique n'importe où sur la page

Je ne sais pas si c'est génial, mais un truc du genre ?

$('html').on('click', function(e){  
  var $target = $(e.target),
      parents = $target.parents().toArray(),
      $research = $('div.nav_content');
  if ( $.inArray( $research.get(0), parents )==-1 && !$research.is($target) ) {
    $('.menu_toggle+ul, .sub_nav_btn+ul').stop().hide(800)
  }  
})

Modifié par SolidSnake (04 May 2016 - 15:23)