Two menus - hide/disable/close the other one?

[toboggany]

I have set up two menus and they are working fine. However, at the moment I'm able to have both of the menus open simultaneously, which is a bit confusing.

Is there a way to hide/disable one menu button while the other menu is open? Or at least close the other menu when I open the other one?

I have been reading and re-reading the available code and tested the demo setups, but I have not been able to fix this, no matter what. So any help would be greatly appreciated!

[diplopito]

Supposedly with "customToggle" should work, but I have not managed to do it. What I did for this case was to give each menu its own ID, use "customToggle" to place the ID of the other menu and use the option open to call a toggle function, like this:

var nav1 = responsiveNav("#menu1", {
[...]
customToggle: "menu2",
open: function(){toggleMenus(this.customToggle)}
}

var nav2 = responsiveNav("#menu2", {
[...]
customToggle: "menu1",
open: function(){toggleMenus(this.customToggle)}
}

function toggleMenus(e) {
if (e === "menu1") {
menu2.close();
} else {
menu1.close();
}
}

[toboggany]

Thank you diplopito for your answer! I finally ended up using an alternative solution without Responsive Nav, so I don't have a quick way to test your suggestion. I might revert to Responsive Nav later though, so I will keep your answer in mind. Thanks once again!

[diplopito]

No worries --just out of curiosity, which one did you select?

[toboggany]

I actually ended up writing my own solution based on a simple instruction outlined at w3schools.com. I know it might not be a popular source, but I was able to make the two menus work even with my sketchy javascript knowledge and so far so good 👍 Having said that, and being a beginner, I would gladly hear if there is a reason why this solution should not for some reason be used.

[diplopito]

For a dropdown menu the w3schools solution is fine. When you need a responsive solution, Responsive Nav excels: visit the site and resize the browser window: your horizontal menu turns into a hamburger menu --although you can find many discussions about this UI pattern, i.e.

[toboggany]

Thanks diplopito, your answer makes sense. My navigation doesn't really need to resize, so from that point of view the w3schools option is probably adequate. And thank you for linking the article, I will keep its arguments in mind for future projects! 🙂