J'ai besoin d'un point de départ dans le menu déroulant

Question

J'apprends jQuery et j'ai besoin de conseils/d'aide pour la création d'un menu déroulant. Jusqu'à présent, je l'ai mis en place où je fais défiler vers le bas et les liens disparaissent et un lien appelé "menu" apparaît.

Je voudrais savoir comment faire glisser les liens quand je clique sur le menu .. Je ne sais pas trop comment procéder.

Voici ce que j'ai jusqu'à présent

html

<div class="container"> 

    <header> 
     <nav> 
      <a href="#"> 
      <span class="menu">Menu</span> 
      </a> 

      <ul> 
       <li>link1</li> 
       <li>link2</li> 
       <li>link3</li> 
      </ul> 
     </nav> 
    </header> 

    <div class="blueDiv"> 
    </div> 

    <div class="redDiv"> 
    </div> 

    <div class="greenDiv"> 
    </div> 

</div> 

Javascript

$(window).scroll(function(){ 
    var topScroll = $(this).scrollTop(); 
    if (topScroll >= 3) { 
     $(".menu").show(); 
     $("ul").hide(); 
    } else{ 
     $("span").hide(); 
     $("ul").show(); 
    } 
}) 


$("a").click(function(){ 
    $("nav.ul").slideToggle(); 
}) 

Je ne me dérange pas la liste de facile à utiliser des plug-ins ainsi.

Answer 1

Vous êtes sur la bonne voie, voici un JS Fiddle qui se développe sur l'exemple fourni par CodePen.

Tout ce que vous aviez besoin d'ajouter était:

$(document).scroll(function(){ 
    $('.navigation').hide(); 
}) 

Alors maintenant, votre script cache le menu lorsque la page se charge:

$(document).ready(function(){ 
    $('.navigation').hide(); 

Ensuite toggles ou le désactiver lorsque l'utilisateur clique dessus.

$('.box').click(function(){ 
     $('.navigation').toggle(); 
     }); 
    }); 

Enfin, il masque le menu lorsque l'utilisateur fait défiler.

$(document).scroll(function(){ 
    $('.navigation').hide(); 
}) 

Si vous voulez snaz il un peu, vous pouvez utiliser slideToggle au lieu de toggle pour cacher et afficher le menu :)