1

I'm new to Magento 2.2... I need to output submenu under a top menu dropdown with three columns. The base Luma theme shows single column for dropdown menu. I have done the change in the code

/app/design/frontend/vendor_name/my_theme/Magento_Theme/templates/html/topmenu.phtml

 <?php $columnsLimit = $block->getColumnsLimit() ?: 0; ?> to

 <?php $columnsLimit = $block->getColumnsLimit() ?: 6; ?>

Now the submenu is divided into 5 items(rows) per column.The dropdown is not displayed because the aria-expanded has not changed to true for third level nested <ul> whilst hovering the Parent menu. I have checked the menu.js and Topmenu.php file. I don't have an idea what to do?. Please anybody help me to fix this.

<nav class="navigation" data-action="navigation">
    <ul data-mage-init='{"menu":{"responsive":true, "expanded":true, "position":{"my":"left top","at":"left bottom"}}}'>
        <li class="level0 nav-1 first level-top parent ui-menu-item" role="presentation"><a href="http://example.com" class="level-top ui-corner-all" aria-haspopup="true" id="ui-id-4" tabindex="-1" role="menuitem"><span class="ui-menu-icon ui-icon ui-icon-carat-1-e"></span><span>ECE Projects</span></a>
            <ul class="level0 submenu ui-menu ui-widget ui-widget-content ui-corner-all" role="menu" aria-expanded="false" style="display: none; top: 47px; left: 0.28125px;" aria-hidden="true">
                <li class="column ui-menu-item" role="presentation">
                    <ul class="ui-menu ui-widget ui-widget-content ui-corner-all expanded" role="menu" aria-hidden="true" aria-expanded="false" style="display: none;">
                        <li class="level1 nav-1-1 first ui-menu-item" role="presentation"><a href="http://example.com" id="ui-id-8" class="ui-corner-all" tabindex="-1" role="menuitem"><span>Item</span></a></li>
                        <li class="level1 nav-1-2 ui-menu-item" role="presentation"><a href="http://example.com" id="ui-id-9" class="ui-corner-all" tabindex="-1" role="menuitem"><span>Item</span></a></li>
                        <li class="level1 nav-1-3 ui-menu-item" role="presentation"><a href="http://example.com" id="ui-id-10" class="ui-corner-all" tabindex="-1" role="menuitem"><span>Item</span></a></li>
                        <li class="level1 nav-1-4 ui-menu-item" role="presentation"><a href="http://example.com" id="ui-id-11" class="ui-corner-all" tabindex="-1" role="menuitem"><span>Item</span></a></li>
                        <li class="level1 nav-1-5 ui-menu-item" role="presentation"><a href="http://example.com" id="ui-id-12" class="ui-corner-all" tabindex="-1" role="menuitem"><span>Item</span></a></li></ul></li>
                <li class="column ui-menu-item" role="presentation">
                    <ul class="ui-menu ui-widget ui-widget-content ui-corner-all expanded" role="menu" aria-hidden="true" aria-expanded="false" style="display: none;">
                        <li class="level1 nav-1-6 ui-menu-item" role="presentation"><a href="http://example.com" id="ui-id-13" class="ui-corner-all" tabindex="-1" role="menuitem"><span>Item</span></a></li>
                        <li class="level1 nav-1-7 ui-menu-item" role="presentation"><a href="http://example.com" id="ui-id-14" class="ui-corner-all" tabindex="-1" role="menuitem"><span>Item</a></li>
                        <li class="level1 nav-1-8 ui-menu-item" role="presentation"><a href="http://example.com" id="ui-id-15" class="ui-corner-all" tabindex="-1" role="menuitem"><span>Item</span></a></li>
                        <li class="level1 nav-1-9 ui-menu-item" role="presentation"><a href="http://example.com" id="ui-id-16" class="ui-corner-all" tabindex="-1" role="menuitem"><span>Item</span></a></li>
                        <li class="level1 nav-1-10 ui-menu-item" role="presentation"><a href="http://example.com" id="ui-id-17" class="ui-corner-all" tabindex="-1" role="menuitem"><span>Item</span></a></li>
                    </ul>
                </li>
                <li class="column ui-menu-item" role="presentation">
                    <ul class="ui-menu ui-widget ui-widget-content ui-corner-all expanded" role="menu" aria-hidden="true" aria-expanded="false" style="display: none;">
                        <li class="level1 nav-1-11 ui-menu-item" role="presentation"><a href="http://example.com" id="ui-id-18" class="ui-corner-all" tabindex="-1" role="menuitem"><span>Item</span></a></li>
                        <li class="level1 nav-1-12 ui-menu-item" role="presentation"><a href="http://example.com" id="ui-id-19" class="ui-corner-all" tabindex="-1" role="menuitem"><span>Item</span></a></li>
                        <li class="level1 nav-1-13 ui-menu-item" role="presentation"><a href="http://example.com" id="ui-id-20" class="ui-corner-all" tabindex="-1" role="menuitem"><span>Item</span></a></li>
                        <li class="level1 nav-1-14 ui-menu-item" role="presentation"><a href="http://example.com" id="ui-id-21" class="ui-corner-all" tabindex="-1" role="menuitem"><span>Item</span></a></li>
                        <li class="level1 nav-1-15 ui-menu-item" role="presentation"><a href="http://example.com" id="ui-id-22" class="ui-corner-all" tabindex="-1" role="menuitem"><span>Item</span></a></li>
                        </ul>
                    </li>
            </ul>
        </li>
    </ul>
</nav>

How can I remove the aria-expanded attribute or change for the third level ul?

Thanks in advance.

1 Answer 1

0

Mage menu is coming from the jQuery Menu widget, which originates from http://code.jquery.com/ui/1.12.1/jquery-ui.js. There all attributes are set, and aria-expanded also.

It is the best not remove it. You can menage it by using standard jQuery .attr() method like $(element).attr("aria-expanded", "false"); or inspect the state of it like if ($(element).attr('aria-expanded') != 'true') {...}.

It is interesting that with this CSS, when you change an element’s aria-hidden attribute, you’re also changing the CSS display property.

The aria-hidden attribute is a way of providing precise instructions to the Assistive Technology device: when true, don’t display/speak the text; if false, display/speak the text. It can be used in combination with the CSS display property to ensure the same result in visual and non-visual environments.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.