CODEWITHSUNDEEP
jqueryhtmltoggle
Lee Herrod
Lee Herrod

Reputation: 51

Close toggle menu on click

I have a toggle menu for mobile. What I need is - when a user clicks on a menu item I need the toggle menu to close.

jQuery:

$(".nav-button").click(function () {
    $(".nav-button,.primary-nav").toggleClass("open");
});

HTML:

<button class="nav-button">Toggle Navigation</button>
<nav id="mobile-nav">
    <ul class="primary-nav">
        <li class="current"><a class="scroll-link" href="#home">text</a></li>
        <li><a class="scroll-link" href="#tab2">text</a></li>
        <li><a class="scroll-link" href="#tab3">text</a></li>
        <li><a class="scroll-link" href="#tab4">{text</a></li>
        <li><a class="scroll-link" href="#tab5">{text</a></li>
        <li><a class="scroll-link" href="#tab6">{text</a></li>
    </ul>
</nav>

Any help would be greatly appreciated, thanks

UPDATE

Thanks for all the answers, but none of them achieved what i want, i know my first question was a little rubbish !

the main reason is the site i`am doing is a parallax scroller , so i want the toggle menu to close when a menu item is clicked so the user can see the parallax effect instead of seeing a static menu

I have come up with a solution that closes the toggle menu when a user clicks on a menu item

the problem is the menu will then not open when i click the toggle button after the menu item has been clicked

is there a way to default back to the original open class once the menu item has been clicked and the menu has closed

$(".nav-button").click(function () {
    $(".nav-button,.primary-nav").toggleClass("open");
});  

$(".scroll-link").click(function () 
    $(".nav-button,.primary-nav").toggleClass("close");
});

Upvotes: 1

Views: 34240

Answers (4)

ASSILI Taher
ASSILI Taher

Reputation: 1350

I assume that you use Bootstrap with Jquery. In this case, you need to add data-toggle="collapse" data-target="#mobile-nav" to your link. Your code will be similar to this:

<button class="nav-button" data-toggle="collapse"
data-target="#mobile-nav">Toggle Navigation</button>

<nav id="mobile-nav">
    <ul class="primary-nav">
        <li class="current">
          <a class="scroll-link" href="#home"
          data-toggle="collapse" data-target="#mobile-nav">text</a>
        </li>

        <li>
          <a class="scroll-link" href="#tab2"
          data-toggle="collapse" data-target="#mobile-nav">text</a>
        </li>

        <li>
          <a class="scroll-link" href="#tab3"
          data-toggle="collapse" data-target="#mobile-nav">text</a>
        </li>

        <li>
          <a class="scroll-link" href="#tab4"
          data-toggle="collapse" data-target="#mobile-nav">{text</a>
        </li>

        <li>
          <a class="scroll-link" href="#tab5"
          data-toggle="collapse" data-target="#mobile-nav">{text</a>
        </li>

        <li>
          <a class="scroll-link" href="#tab6"
          data-toggle="collapse" data-target="#mobile-nav">{text</a>
        </li>
    </ul>
</nav>

Upvotes: 0

HAR
HAR

Reputation: 23

[enter link description here][1]This may be a little late for you, but I was just searching for the answer to the same question using the same mobile menu, and this is what I used to get things working correctly. 

$(".nav-button, ul.primary-nav li a").click(function () {
$(".primary-nav").toggleClass("open");
});

http://jsfiddle.net/rcdtest/HDQNs/

Upvotes: 1

Mustapha Aoussar
Mustapha Aoussar

Reputation: 5923

Try with .slideToggle() :

$("button.nav-button").click(function() {
    $("nav#mobile-nav").slideToggle("fast");
});

$("ul.primary-nav li a").click(function() {
    $("nav#mobile-nav").slideUp("fast");
});

jsFiddle

Upvotes: 0

Giorgi BaneTishvili
Giorgi BaneTishvili

Reputation: 41

I don't understand what you need exactly, but try this one:

$(".nav-button").click(function () {
    $("#mobile-nav").toggle();
});

$(".scroll-link").click(function () {
    $("#mobile-nav").hide();
});

Upvotes: 3

Related Questions