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.