Simple Megamenu Bonus extends the great Simple Megamenu Module by @flocondetoile

Special thanks to @flocondetoile!
If he likes the concept of these extensions we'd be happy to integrate this module into simple_megamenu one day. Otherwise this should be seen as a nice option for your special use-case. Simply read on...

NOTE: Even when this module is Drupal 10 compatible, it's required parent module Simple Mega Menu, is NOT until #3289637: Automated Drupal 10 compatibility fixes is fixed!

What it does:

  • Extends megamenu item entities with a view mode selector to allow view mode selection for every single mega menu item.
    • Provides a new twig function: view_megamenu_bonus(menu_item, menu_item_below_rendered) which renders the megamenu item in the selected view mode
  • Adds the (optional, other) menu items below the parent menu entry which links to the mega menu as computed field to remove the dependency for "before" / "after" viewmode and make them flexibly movable in mega menu field display. This allows for flexible mega menu item (field) layouts and displays. Also allows to flexibly disable output of below menu items in displays.
  • TEMP-fixes #2917431: Add theme suggestion from menu block suggestion field ("Add theme suggestion from menu block suggestion field") by hook_theme_suggestions_HOOK_alter. [THIS WILL BE REMOVED IF / AS SOON AS THE PATCH BECOMES PART OF simple_megamenu].

Requirements

Simple Megamenu Module (please read its Documentation)

How to use this module (TO BE CONTINUED):

1. Install simple_megamenu and simple_megamenu_bonus
2. Copy simple_megamenu_bonus/templates/menu--simple-megamenu.html.twig into the "templates" directory of your theme
3. Clear caches
4. Read the documentation of simple_megamenu because we simply extends its logic.
5. Configure your mega menu type(s) and its field displays (e.g. admin/structure/simple_mega_menu_type/megamenu_default/edit/display).
Move (to display it in the right place) or disable (if you want to hide them) the "Submenu (menu items below)" field display and your custom fields.
6. Create the different view modes you'd like to use to render or just keep the "default" if you only need one.
(6a. Eventually delete "before" / "after" view mode if you don't need them. The are from simple_megamenu and are not useful in our logic. Anyway they won't have any negative or positive effect, if you keep them.)
7. Create your simple megamenu items (e.g. admin/content/simple_mega_menu) and select the view mode to render each mega menu item in.
8. Enjoy the results and provide feedback ()

Default menu twig template:

(menu--simple-megamenu.html.twig)

{{ attach_library('simple_megamenu/base') }}
{{ menus.menu_links(items, attributes, 0) }}

{% macro menu_links(items, attributes, menu_level) %}
  {% import _self as menus %}
  {% if items %}
    {% if menu_level == 0 %}
      <ul{{ attributes.addClass('menu', 'menu--simple-mega-menu') }}>
    {% else %}
      <ul {{ attributes.removeClass('menu--simple-mega-menu') }}>
    {% endif %}
    {% for item in items %}
      {%
        set classes = [
          'menu-item',
          item.is_expanded ? 'menu-item--expanded',
          item.is_collapsed ? 'menu-item--collapsed',
          item.in_active_trail ? 'menu-item--active-trail',
        ]
      %}
      <li{{ item.attributes.addClass(classes) }}>
        {{ link(item.title, item.url) }}
        {% if has_megamenu(item.url) %}
          <div class="mega-menu-wrapper">
            <div class="mega-menu-background"></div>
            {% set menu_item_below_subtree_rendered = menus.menu_links(item.below, attributes.addClass('mega-menu-item'), menu_level + 1) %}
            {{ view_megamenu_bonus(item, menu_item_below_subtree_rendered) }}
          </div>
        {% else %}
          {% if item.below %}
            {{ menus.menu_links(item.below, attributes.removeClass('mega-menu-item'), menu_level + 1) }}
          {% endif %}
        {% endif %}
      </li>
    {% endfor %}
    </ul>
  {% endif %}
{% endmacro %}

Versions

  • 8.x-1.x was the original Drupal 8 Version (deprecated)
  • 2.x is the Drupal 9 compatible successor, you may update without fear!

Development proudly sponsored by German Drupal Friends & Companies:

webks: websolutions kept simple (https://www.webks.de)
and
DROWL: Drupalbasierte Lösungen aus Ostwestfalen-Lippe (OWL), Germany (https://www.drowl.de)

Supporting organizations: 
Development and maintenance

Project information

Releases