Make dropdown menu disappear after link has been selected

I have the following code for a dropdown menu:

<header>
        <nav class="navbar"> 
            <div class="inner-wrapper">
              <a class="button" id="menu-button">Menu</a>
              <ul>
                <li><a target="_blank" rel="nofollow" href="#about">About</a></li>
                <li><a target="_blank" rel="nofollow" href="#classes">Classes</a></li>
                <li><a target="_blank" rel="nofollow" href="#contact">Contact</a></li>
              </ul>
            </div>
        </nav>
</header>

header nav div ul {
    list-style: none;
    padding: 0;
    line-height: 1.75;
    background-color: rgba(255, 255, 255, 0.6);
    margin-top: 5px;
    overflow: hidden;
    height: auto;
    display: none;
}

header nav div ul.menu-open {
    display: block;
}

$(".button").click(function() {
  $("header nav div ul" ).animate({
    opacity: 1,
    height: "toggle"
  }, 300, function() {
     $("header nav div ul").toggleClass("menu-open");
  });
});

So when a user clicks on the button it toggles the class which opens the menu. The menu is currently for a one page website so I also have a smooth scroll script working. How do I get the menu to disappear after a user has made their selection, like the menu disappearing after they have selected about and it has taken them to the right section.

Thanks!



You could try doing something like this:

I added the class li-option to the ‘lis a’ tag and then created a onclick function to this class.

<header>
    <nav class="navbar"> 
        <div class="inner-wrapper">
          <a class="button" id="menu-button">Menu</a>
          <ul>
            <li><a target="_blank" rel="nofollow" href="#about" class="li-option">About</a></li>
            <li><a target="_blank" rel="nofollow" href="#classes" class="li-option">Classes</a></li>
            <li><a target="_blank" rel="nofollow" href="#contact" class="li-option">Contact</a></li>
          </ul>
        </div>
    </nav>
</header>

<script>
header nav div ul {
    list-style: none;
    padding: 0;
    line-height: 1.75;
    background-color: rgba(255, 255, 255, 0.6);
    margin-top: 5px;
    overflow: hidden;
    height: auto;
    display: none;
}

header nav div ul.menu-open {
    display: block;
}

$(".button").click(function() {
  $("header nav div ul" ).animate({
    opacity: 1,
    height: "toggle"
  }, 300, function() {
     $("header nav div ul").toggleClass("menu-open");
  });
});

$(".li-option").click(function() {
  $("#menu-button" ).css('display', 'none');
});

One issue with this approach is if you select the wrong option, the user will need to reload the entire page in order to re-select if you mean to hide the dropdown totally. However, if this is the approach you wish to take, Simply add an onchange handler to the dropdown with a script to select the dropdown by id, in JS document.getElementById(id).style.display = none;
if this is not what you mean clarify what you want done and we will try again.

Try that : a fiddle

$(".button").click(function() {
  $("header nav div ul" ).animate({
    opacity: 1,
    height: "toggle"
  }, 300 );
});
$('.navbar li a').click(function(){
  $("header nav div ul" ).animate({
    opacity: 1,
    height: "toggle"
  }, 300 );
});
$(".button").click(function() {
  $("header nav div ul" ).animate({
    opacity: 1,
    height: "toggle"
  }, 300, function() {
     $("header nav div ul").toggleClass("menu-open");
    $('.navbar li a').click(function(){
      $("header nav div ul").toggleClass("menu-open");
      $("header nav div ul" ).animate({
    opacity: 1,
    height: "hide"
  }, 300);
    });
  });
});

I tried somethin like that in js bin and it worked. Is this what you are looking for?

jsbin

I added a click event for the <li> and then simulate a click on .button