Im wondering if there is a easy way to implement the following dropdown menu(ive added a before hovering on a list item, and after):
If i had to do it right now, i would use a bootstrap dropdown, and basically have to create an entire module around making the paths to point in the right directions.
Do you guys know of any existing menus or any easier way of doing this?
thanks
(not a complete answer, but too much for a comment)
The main characteristic of a "mega menu" is that the contents of the menu are not limited to a simple list or tree of menu links. In your own example you have links with descriptions / subtitles, you have a picture, you have multiple columns that probably have nothing to do with a menu tree structure.
This is why you should use tools other than menu links system, for the contents of each megamenu box.
The first step is to forget you are creating a menu, and instead imagine you would be creating custom pages or blocks. How you create these, is a question for itself.
I have heard of someone who used nodes (possibly with pragraphs module), where every megamenu page is a node.
Another option would be to do something with panels.
The next question is how to anchor the megamenu contents to the actual menu items.
The person who used nodes for the megamenu pages (if I remember correctly) used a field where people specify the menu link path. Then when displaying the menu, the contents from the matching node are inserted as submenu.
You could also completely give up on the links being menu links, and instead just display node titles as toplevel items (sorted by whichever criterion), and then the rendered node as "submenus". This could be done with views, if you use a ul/li list as the style plugin (with custom classes) and a special view mode + layout for each item with its megamenu page. The special html you need would be in the custom layout.
Special attention should be given to multiple language versions, and possibly access checks for links. Maybe you use different paths in different languages?
This still requires some creativity in putting everything together.
But the main idea should be to look for solutions outside the menu links system.
EDIT: I should add: You may want to think about doing something with ajax, to let the contents of the pages load after the main page contents. If I remember correctly, the person I talked to did this somehow, I just don't remember how exactly.
Credits to https://twitter.com/rachel_norfolk
Just use https://www.drupal.org/project/menu_item_extras, it adds fields to the core Menus, no extra entities or configurations.
I basically used the Responsive and off-canvas menu module in D8 and created a view of content, with a JSON output, to give men the mega-menu content that I could "collect" via a bit of jQuery and attach to the menu items lazily if (and only if) the main desktop menu <ul> was visible.
I speculatively submitted it to Frontend United. Not sure they want to admit people still need mega-menus, though ;-)
superfish has a D8 version yet. TB megamenu is in development, but I couldn't find it's source ...
But right now you probably have to do it on your own. You could make a view that you show as menu-item.
If you're already familiar with Drupal 7 site building with Panels module, there is a specific module that helps integrate Drupal 7 core Menu system with Mini-panels for mega menus:
I have built many Drupal 7 sites using this, but the 1.x version of the module depends on the QTip Jquery Library, which is very hard to wrap your brain around and theme.
Because QTip is a total PITA, I help update the 2.x module to better support integration with the Superfish module and Nice Menus module. Unfortunately I haven't had time to give the 2.x the attention it needs, and there is currently no plan to migrate this to Drupal 8 (yet) due to lack of time.
For anybody who may come across this, I tried https://www.drupal.org/project/we_megamenu which is released recently. It works!
You can check this https://megadrupal.com/project/md-megamenu Very easy to use (I watch the video), the problem: it's not free
