Hide Navigation Inline dropdown menu after click

[WaggingLabs]

I’m using a navigation dropdown menu for all social media links which are set to open in a new window.

The dropdown menu stays active too long. It will close after the user clicks off the menu or after a few seconds. I’d like it to close after click.

Credentials to follow

[ruenel]

Hello @WaggingLabs,

Thanks for writing in!

Please be advised that the sub menus will be displayed through the hover events of the parent menu item. If you want to eliminate the few seconds of transition, then you may use this code instead:

ul.sub-menu.x-dropdown.x-active {}

body .x-menu-inline .x-dropdown, 
body .x-menu-inline .x-dropdown.x-active {
    transition-duration: 0s !important;
    opacity: 0;
    visibility: hidden;
}

body .x-menu-inline>li:hover .x-dropdown,
body .x-menu-inline>li:hover .x-dropdown.x-active {
    transition-duration: 0.5s opacity ease !important;
    opacity: 1;
    visibility: visible;
}

We would loved to know if this has work for you. Thank you.

[WaggingLabs]

Hi @RueNel,

I suspect my issue has more to do with the new tab opening in front of the website tab. I was able to see a shortened transition when I forced the tab to open in the background. When the tab opens in front of the website and the user clicks back to the site tab, the menu stays open.

Would it be possible to close the submenu after click? Since I can’t control the browser, this might be the only way to appease my client.

Thanks!

[rad]

Hi @WaggingLabs,

That’s not currently possible since it’s triggered by hover event instead of click. And it’s true since it opens a new browser tab which means the action is halted and focused on that new tab, hence, leaving the sub-menu open.

Thanks!