Easy responsive side menu for meteor applications to use, which slides from the left. The easy side menu has been called many names, facebook style menu, pancake nav, burger menu. This is essentially bootstrap nav-collapse mechanism...
4
stars
1
forks
source link
Menu needs 2 clicks to open after routing (solution) #6
I found an issue that on the first page load, the menu works as expected, but when you change pages (route to another page), the menu takes 2 clicks to open. I ran some console.logs and found that it has to do with the "click anywhere outside the menu to close it" part of the code:
...
// create a one-time event to close when a user clicks anywhere outside
$(document).one('touchstart click', function(){
slideoutMenu.toggleClass("open");
slideoutMenu.animate({left: -slideoutMenuWidth}, 250);
});
...
You see, clicking on a button (or whatever) that takes you to another page (routing) also counts as a click outside of the menu boundaries. This will toggle the "open" class, without actually opening the menu (since you can only do that by clicking on the menu button you added). So, the menu will have the class "open", but stay closed. Adding an extra check around the toggle solves this issue:
...
// create a one-time event to close when a user clicks anywhere outside
$(document).one('touchstart click', function(){
if (slideoutMenu.hasClass("open")) {
slideoutMenu.toggleClass("open");
}
slideoutMenu.animate({left: -slideoutMenuWidth}, 250);
});
...
I found an issue that on the first page load, the menu works as expected, but when you change pages (route to another page), the menu takes 2 clicks to open. I ran some console.logs and found that it has to do with the "click anywhere outside the menu to close it" part of the code:
You see, clicking on a button (or whatever) that takes you to another page (routing) also counts as a click outside of the menu boundaries. This will toggle the "open" class, without actually opening the menu (since you can only do that by clicking on the menu button you added). So, the menu will have the class "open", but stay closed. Adding an extra check around the toggle solves this issue: