Force an Off-Screen Toggle Menu to close when selecting an anchor link?

Question

The Javascript solution I'm looking for should accomplish the following:

Toggle open Offscreen Toggle menu
Select an anchor tag menu link, which navigates to the anchored section on the same page
The toggle menu closes

This is the full code Fiddle demonstrating the issue: https://jsfiddle.net/fpbs6fkz/

NOTE: The Additional JS + CSS are too long to post on stack overflow**

The problematic JavaScript:

// Find all menu links
var navLinks = document.querySelectorAll('.c-menu__link');
// For each menu link
var index = 0, length = navLinks.length;
for ( ; index < length; index++) {
    // Attach click event, on click call close function
    navLinks[index].addEventListener('click',
        function () {
            slideLeft.close();
        }
    );
}

Above is the javascript function that should close the toggle menu every time I click on an anchor link and navigate to the desire section, but it's not working at all.

HTML:

<!-- Start of Slidesmenu -->
<div class="mobilemenu">
  <div class="wsmenucontent overlapblackbg"></div>
    <div class="wsmenuexpandermain slideRight">
    <a id="navToggle" class="animated-arrow slideLeft"><span></span></a>
    <a href="#" class="smallogo"><img src="assets/img/logo4.png" width="120" style= "margin-top:-5px;" alt="" /></a>

  </div>

  <nav  id="c-menu--slide-left" class="wsmenu slideLeft">
   <ul class="mobile-sub wsmenu-list">                          
    <li class="c-menu__item"><a href="#about" class="c-menu__link active"><i class="fa fa-home"></i>About</a></li>
    <li class="c-menu__item"><a href="#contact" class="c-menu__link"><i class="fa fa-road"></i>Contatc</a></li>
    <li class="c-menu__item"><a href="#fhowitworks" class="c-menu__link"><i class="fa fa-flask"></i>How it Works</a></li>
    <li class="c-menu__item"><a href="#tools" class="c-menu__link"><i class="fa fa-puzzle-piece"></i>Tools</a></li>
    <li class="c-menu__item"><a href="#help" class="c-menu__link"><i class="fa fa-wrench"></i>Help</a></li>
    <li class="c-menu__item"><a href="#customers" class="c-menu__link"><i class="fa fa-server"></i>Customers</a></li>
    <li class="c-menu__item"><a href="#business" class="c-menu__link"><i class="fa fa-lock"></i>Business</a></li>
    <li class="c-menu__item"><a href="#location" class="c-menu__link"><i class="fa fa-users"></i>Location</a></li>
    <li class="c-menu__item"><a href="contact.html" class="c-menu__link"><i class="fa fa-envelope-o"></i>Contact</a></li>
   </ul>
  </nav>
</div>
<div id="about"><p>About</p></div>
<div id="contact"><p>Contact</p></div>
<div id="howitworks"><p>How it Works</p></div>
<div id="tools"><p>Tools</p></div>
<div id="help"><p>Help</p></div>
<div id="customers"><p>Customers</p></div>
<div id="business"><p>Business</p></div>
<div id="location"><p>Location</p></div>

<script>window.jQuery || document.write('<script src="https://code.jquery.com/jquery-1.11.2.min.js"><\/script>')</script>

So my question is:

How do I fix the JavaScript code so that the toggle menu closes, and navigates to the anchored section when I select an anchor menu link?

Its no a plugin, only jquery 1.1.2 min. Check the fiddle. The code is all there https://jsfiddle.net/fpbs6fkz/ — ChosenJuan, Feb 22 '16 at 18:25
ok, but I can't see that `slideLeft` is defined here. and what is `.close()` method you are calling on — The Process, Feb 22 '16 at 18:38
I cant post the entirety of the code, the characters are too long, hence the fiddle. The .close should be to close the menu. Like I said I'm new to jquery, but i was trying to do something like this: https://jsfiddle.net/trsjL9th/3/ — ChosenJuan, Feb 22 '16 at 19:11

score 1 · Accepted Answer · answered Feb 22 '16 at 21:07

Despite the horrendous layout of the code and the obfusticated javascript, you can simply replace:

slideLeft.close();

with

$("#navToggle").click()

I would normally tell you to reuse the click event handler for #navToggle, but it's hidden away.

For a more "jquery" solution, replace your entire javascript (that you included in the question and that isn't hidden in the fiddle) with:

$(".c-menu__link").click(function() { $("#navToggle").click() })

Updated fiddle: https://jsfiddle.net/wqd39kL2/1/

Thanks, for the great answer, my aplogies for the bad Javascript I was trying to customize a similar js solution with little js knowledge. — ChosenJuan, Feb 22 '16 at 21:15

Force an Off-Screen Toggle Menu to close when selecting an anchor link?

1 Answers1