I’m after some advise on potential plugins to use for this effect. I’ve seen it before on projects but they all seem to use 2 separate menus and they’re shown/hidden when needed. Ideally I’d like to have just the 1 menu (list) to keep it simple. I think it’s pretty self-explanatory but I’ll explain the behaviour just to make sure.
On mobile/tablet the menu should slide-out from the left when a toggle is clicked (an overlay should fade the page out). As there will be nested lists for the mega-menu(s) these should slide open when the parent is clicked/tapped. Closing the menu slides the nav back out of view, the ‘page’ returns to it’s original position and the overlay to fade it out is hidden.
On desktop the menu with be a horizontal nav bar in the header and when an item is hovered over which contains a child list the mega menu is displayed.
Any anyone recommend a suitable solution for this? I thought about just coding the desktop menu as I normally would and then setting position: fixed on the menu to position it off the screen. Then when the toggle is clicked add a class to the body to slide the menu in and then move the ‘page’ by the same value – I assume the menu would need to have a fixed width to do this?
I’m not sure if that would work but even if it did, I’d have the problem of the mega-menu’s sliding out on mobile.
Any ideas?
