Problem/Motivation

When using route:<nolink> on a menu item that is being displayed in the MegaMenu, the javascript that is being run does not handle the situation when the menu item is a <span> instead of a <a>, which prevents that Menu item from displaying it's child menu items.

Proposed resolution

Update the frontend javascript to function when a menu item is either <span> or a <a>.

CommentFileSizeAuthor
#2 we_megamenu-click_on_men_items_not_working_with_no_link-3081237-2.patch1.21 KBHaley.O

Comments

Haley.O created an issue. See original summary.

Haley.O’s picture

Haley.O commented
StatusFileSize
new we_megamenu-click_on_men_items_not_working_with_no_link-3081237-2.patch1.21 KB

I have created a patch that accounts for the menu item being a <span> in the we_megamenu_frontend.js file.

Haley.O’s picture

Haley.O commented
Status: Active » Needs review
michelledarling’s picture

michelledarling
she, her
commented

Another solution is to copy we-megamenu-li.html.twig template to your theme folder and change to:

<li {{ attributes }}>
  {% if href is empty %}
    <a href="#" class="we-megamenu-nolink">{{ title }}</a>
  {% else %}
    <a class="we-mega-menu-li" title="{{ attribute(attributes, 'description') }}" href="{{ href }}" target="{{ attribute(attributes, 'data-target') }}">
      {% if (attribute(attributes, 'data-icon') is defined and attribute(attributes, 'data-icon')|trim) %}
        <i class="{{ attribute(attributes, 'data-icon') }}"></i>
      {% endif %}

      {{ title }}

      {% if (attribute(attributes, 'data-caption') is defined and attribute(attributes, 'data-caption')|trim) %}
        <span class="we-mega-menu-caption">{{ attribute(attributes, 'data-caption') }}</span>
      {% endif %}
    </a>
  {% endif %}
  {{ content }}
</li>

With this change, the top level links are focusable and can be traversed and opened with tab+enter on a keyboard, making the menu more accessible. (I use a custom Bootstrap theme with some boilerplate ARIA stuff in JS so if it doesn't work for you, let me know and I'm happy to give more information about how this can be accomplished.)