CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Lucy S.
Lucy S.

Reputation: 185

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 href="#about">About</a></li>
                <li><a href="#classes">Classes</a></li>
                <li><a 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!

Upvotes: 2

Views: 1621

Answers (5)

Gerard
Gerard

Reputation: 15786

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

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

$("li").click(function() {
  $(".button").trigger("click"); // Simulate the button click
});
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;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header>
  <nav class="navbar">
    <div class="inner-wrapper">
      <a class="button" id="menu-button">Menu</a>
      <ul>
        <li><a href="#about">About</a></li>
        <li><a href="#classes">Classes</a></li>
        <li><a href="#contact">Contact</a></li>
      </ul>
    </div>
  </nav>
</header>

Upvotes: 0

Frank
Frank

Reputation: 114

$(".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

Upvotes: 0

Aref Ben Lazrek
Aref Ben Lazrek

Reputation: 1066

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 );
});

Upvotes: 1

David Dutra
David Dutra

Reputation: 401

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 href="#about" class="li-option">About</a></li>
            <li><a href="#classes" class="li-option">Classes</a></li>
            <li><a 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');
});

Upvotes: 0

Theodore Howell
Theodore Howell

Reputation: 428

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.

Upvotes: 0

Related Questions