Horizontal dropdown or mega menu with the core Smart Menus

[alanmels]

Because the core drop-down style menu lacked some features, yesterday I've pushed the new Smart Menu module. However, even with all the smartmenus options considered, it's still impossible to easily get, as different users call them differently, horizontal dropdowns, multi-column sub-menus or megamenus.

Unfortunately, Smartmenus documentation on https://www.smartmenus.org/docs doesn't have good examples for formatting submenus. I've found number of relevant discussions on their forums, but not a single one that would fit to our use-case. I even stumbled upon on @jenlampton's question on https://www.smartmenus.org/forums/topic/submenu-formatting/#post-3576, which was never properly answered. So wishing the menu system in the core was more versatile and allowed easily configurable menu styles, I wonder why the decision was taken in favor of Smartmenus. There is some context one https://github.com/backdrop/backdrop-issues/issues/2809 if you wonder.

However, considering lot's of Backdrop users have been already using whatever came with Bakcdrop core, the above question has more rhetorical character (unless, of course, lot's community members say: let's replace it with something more flexible) What I'm trying to find out now is that we basically have this implementation that comes by default:

https://www.w3schools.com/howto/howto_js_responsive_navbar_dropdown.asp

However, I'm trying to get the core drop-down menu to work like in this case:

https://www.w3schools.com/howto/howto_css_subnav.asp

Because, in that case it will be fairly easy to create megamenus like on https://www.w3schools.com/howto/howto_css_mega_menu.asp

Please let me know if you know any way - via styling or overriding the javascript - of getting all dropdown menu layers to float left. Unfortunately positioning the respective ul to absolute and making left equal to zero doesn't help - they all drop down just under parents horizontal position.

[jenlampton]

I've had a fair amount of success building mega menus with smartmenus, following the MegaMenus example on this page: https://www.smartmenus.org/wp-content/cache/all/about/themes/index.html#demos-6

I know the demo there isn't working right now (I did file a ticket about it with them), but I copied the HTML structure on my own site, and was able to get the mega-menu functionality working as expected.

I did not try to get all menu layers to float left, so I don't think I can help you with that :)

[alanmels]

@jenlampton, thanks for the input. Unfortunately, getting the drop-down layer aligned to the left was not possible using styling, so instead of requesting change in the jquery file in the core (as it could take forever), it was easier to port another module: https://github.com/backdrop-contrib/superfish which made aligning peace of cake.

[klonos]

I wonder why the decision was taken in favor of Smartmenus.

That was done back in 2016, and when we evaluated various options, SmartMenus was ticking all the boxes. See #2107

[klonos]

@alanmels at some point I suggested that we use the in-built functionality of SmartMenus to provide mega menus in core OOTB, but we decided that it wasn't an 80% use case, and left it for contrib. See #2208

[alanmels]

@klonos, thanks for the links.

@alanmels at some point I suggested that we use the in-built functionality of SmartMenus to provide mega menus in core OOTB, but we decided that it wasn't an 80% use case, and left it for contrib. See #2208

With the https://backdropcms.org/project/menu_attach_block ported yesterday that's now easily possible. However, it has one problem - you can not align the drop-down layers to the left. The same problem exists with the in-built megamenu feature - all the drop-downs are positioned just under their parent menu items. Would be wonderful if someone could fix this.