I have rather extensive mobile menu structure containing 3 levels of submenus. While on mobile and opening the menu, I’d like to expand the menu branch containing the current page, so the user could better understand where he is located.
Right now, when opening the mobile menu, all the items and levels are collapsed and it’s hard to grasp, where exactly the current page is. Especially considering, the parent items are not highlited either.
I’m using classic Nav Menu, haven’t tried the nested version yet.
Anyone knows, how can I resolve this problem?
Thanks
But the web is in early stage of development, and I’m about to make a changes to the menu (I’ll be testing a nested version of menu element). So, in couple of days the link may be irrelevant to the problem.
<script type="text/javascript">
// Run the script after the page has loaded
window.addEventListener('DOMContentLoaded', (event) => {
// Get all the li elements with the 'menu-item' class
const menuItems = document.querySelectorAll('li.menu-item');
menuItems.forEach((item) => {
// Check if the element has the 'current-page-ancestor' class
if (item.classList.contains('current-page-ancestor')) {
// Add the 'open' class to the element
item.classList.add('open');
// Add the 'active' class to the element
item.classList.add('active');
}
});
});
</script>
On load the submenu is open even for the desktop (probably could be resolved by modifying the select only for the mobile menu).
Destop menu opened this way tends to stay open even when hovered out.
Mobile menu is expanded as expected, but when the other menu is clicked the branch stays expanded (without the script only one submenu stays expanded).
BTW, concerning the expanded mobile submenu - I wouldn’t mind if the previously expanded menu stayed expanded (so I could have several menu expanded). In fact I would prefer it to behave this way - is it possible to do it? Of course consistently, not just fo the current page branch.
thank you for posting the quirks, now I found some time to look at it again. You are totally right. I’ve taken another look at it and made another approach. It’s tested for the quirks you mentioned, maybe it has new ones
Please try the following code:
// Run the script after the page has loaded
window.addEventListener("DOMContentLoaded", (event) => {
// Get the mobile-menu-trigger-button
const menu_trigger = document.querySelector(".bricks-mobile-menu-toggle");
// listen for click-event on the mobile-menu-trigger-button
menu_trigger.addEventListener("click", (event) => {
// wait 10ms to give the menu time to open (bricks will apply some settings to the menu with its own listeners)
setTimeout(() => {
showCurrentMenuItem();
}, 10);
});
function showCurrentMenuItem() {
// Get all list-items that have children and are ancestors of the current page
const listItemsToOpen = document.querySelectorAll(
"li.current-menu-ancestor.menu-item-has-children"
);
listItemsToOpen.forEach((item) => {
const btnToggleSubmenu = item.querySelector("button");
// create a click-event
const clickEvent = new Event("click", { bubbles: true });
// we simulate a click-event on the button to open the sub-menu
btnToggleSubmenu.dispatchEvent(clickEvent);
});
}
});
