[6.0] Fix menu toggle startlevel handling

[LadySolveig]

Pull Request for Issue # .

Summary of Changes

Fix the menu toggle behavior based on the configurable start level.

Many thanks to @woluweb who reported this issue.

Testing Instructions

Actual result BEFORE applying this Pull Request

The toggle for the submenu is missing when the `start level for the menu is set to > 1.

see also #46484 (comment)

Expected result AFTER applying this Pull Request

Works as expected also when the `start level for the menu is set to > 1.

see also #46484 (comment)

Link to documentations

Please select:

• Documentation link for docs.joomla.org:

• No documentation changes for docs.joomla.org needed

• Pull Request link for manual.joomla.org:

• No documentation changes for manual.joomla.org needed

[woluweb]

I have tested this item ✅ successfully on 3b86864

I have tested this successfully.
Thank you so much Martina!

On these screenshots taken on https://www.healthybelgium.be/en/medical-practice-variations/medications, we have a side menu where Start Level = 2, the idea being to show a "dynamic contextual menu"

On the screenshot "before", we see that the submenu items of "Medications" is not visible (it is in the HTML though).
With this fix, wee see on the screenshot "after" that there is a "Caret" allowing to open the submenu items.

[ My only potential question would be: atm the Menu Item in question has a caret, but the latter is "closed" by default. What could one do, even with custom CSS or JS, to have it "opened" by default) ? ]

---

_{This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/46484.}

[LadySolveig]

@woluweb your welcome! Thank you for reporting this issue.

[ My only potential question would be: atm the Menu Item in question has a caret, but the latter is "closed" by default. What could one do, even with custom CSS or JS, to have it "opened" by default) ? ]

if you want the submenu items to be open by default when the parent menu item is the currently active, you can create a user.js in your template like this:

((document) => {

  document.addEventListener('DOMContentLoaded', () => {
    // mod-menu110 is the ID generated for the menu module that should behave this way
    // can also be replaces with a custom class set in the module settings
    const menuRoot = document.getElementById('mod-menu110');
    if (!menuRoot) {
      return;
    }

    const menuActiveLi = menuRoot.querySelector('li.current.active');
    if (!menuActiveLi) {
      return;
    }

    menuActiveLi.querySelector(':scope > [aria-expanded]')?.setAttribute('aria-expanded', 'true');

    const subLists = menuActiveLi.querySelectorAll('ul');
    subLists.forEach(subList => {
      subList.setAttribute('aria-hidden', 'false');
      subList.classList.add('show-menu');
    });
  });

})(document);

Then set the attribute for this to defer in joomla.asset.json. This file should also be in your template normally.
For Cassiopeia, for example, it would look like this:

It may also be useful to override the default.php so that it does not “jump” when the page is loaded.

I hope that helped. Happy coding :)

[woluweb]

Txs @LadySolveig for the extra instructions about "how to have the submenu items opened by default".
Very detailed & clear !
And very much appreciated :)

[bembelimen]

I have tested this item ✅ successfully on 3b86864

---

_{This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/46484.}

[bembelimen]

Set to RTC

---

_{This comment was created with the J!Tracker Application at issues.joomla.org/tracker/joomla-cms/46484.}

[Bodge-IT]

Thank you @LadySolveig for fix, @woluweb for finding issue + test & @bembelimen for test