JS close menu on menu element click

Question

Happy new year to all!! I'm a JS beginner and I'm playing with a circular menu on a web page. This is the circular menu:

https://codepen.io/bennettfeely/pen/qRJOZJ/

I have implemented this menu with 11 rings. The 'Menu' and 'Close' buttons work. When I click on a menu item it goes to the item but the menu stays open. I would need to close the menu when the item is clicked or anywhere else on the page is clicked. I have the feeling that the solution is all in the JS script.But it seems to me that the JS is complete and I don´t understand why it does not work. The:

setTimeout(function(){
    nav.classList.toggle('open');   
}, 800);

should do it, am I right? Or is anything missing? I have also added a

<script src="https://code.jquery.com/jquery-3.3.1.js"
  integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60="
  crossorigin="anonymous"></script>

to my html as I noticed that the code is actually jquery and not JS, but it didn´t help.

This is how I'm keeping the menu items links in the markup:

<a href="#scuola" class="disc l7">
<div>scuola</div>
</a>
<a href="#attivita" class="disc l8">
<div>attività</div>
</a>
<a href="#chi" class="disc l9">
<div>chi siamo</div>
</a>
<a href="index.html" class="disc l10">
<div>home</div>
</a>
<a class="disc l11 toggle">
Menu
</a>
</nav><!--menu end-->

That only runs when the page first loads. (Which is why the initially-open menu closes automatically 800ms after the page first loads - which looks like an odd effect to me.) It's not clear how you will implement the links in the finished version of the page, but assuming they will work by Javascript rather than actually going to a new page, then your setTimeout will do nothing (because the page isn't reloading). In that case you'll need to remove the `open` class in an event listener for the click on menu items. — Robin Zigmond, Jan 02 '19 at 10:31
"I noticed that the code is actually jquery and not JS" - just as a note, jQuery is *still* JS. It's a library written in Javascript that you can use in your Javascript code - but it's just as much Javascript as manipulating the DOM with the native DOM API (`addEventListener` and so on) is. — Robin Zigmond, Jan 02 '19 at 10:34
many thanks indeed @RobinZigmond for your prompt answer. I've updated the main post with how I'm setting the menu items in the markup. Apologies for the too many edits.. I'm new to stack overflow — Lothar, Jan 02 '19 at 10:40

Mukyuu · Accepted Answer · 2019-01-02T11:46:22.893

You can try the following code or check DEMO

toggle = document.querySelectorAll(".toggle")[0];
var timeout;
nav = document.querySelectorAll("nav")[0];
toggle_open_text = 'Menu';
toggle_close_text = 'Close';

document.onclick= function(event) {
    window.clearTimeout(timeout);
    // Compensate for IE<9's non-standard event model
    //
    if (event===undefined) event= window.event;
    var target= 'target' in event? event.target.id : event.srcElement;
if(target!="menu"){
    timeout = setTimeout(function(){
    nav.classList.toggle('open');   
}, 800)
    toggle.innerHTML = toggle_open_text;
}
};

    toggle.addEventListener('click', function() {
    nav.classList.toggle('open');

  if (nav.classList.contains('open')) {
    toggle.innerHTML = toggle_close_text;
  } else {
    toggle.innerHTML = toggle_open_text;
  }
}, false);


timeout= setTimeout(function(){
    nav.classList.toggle('open');   
}, 800)

You might want to see here for more detail as to how detect click on browser.

Updated: Refer here and here for more details regarding timeout.

many thanks Mukyuu. Although the code in the DEMO works flawlessly in my scenario has weird behaviours. First when click on Menu it open and close too quick, so I edited the timeout value from 800 to 5800. but after this, the menu closes after an item is clicked and after few secs it opens again... — Lothar, Jan 02 '19 at 11:13

JS close menu on menu element click

1 Answers1