Currently, I am working on a project and looking to incorporate the jQuery plugin mmenu (). Despite making some customizations to suit my requirements, I am facing a dilemma. In mmenu, clicking on a list entry navigates to the specified href and marks the clicked item as active using the CSS class ".mm-selected". However, I now aim to highlight the parent list item (and its parents up to the root menu) as selected as well. This way, users navigating upwards in the menu can easily identify their current category.
Below is an example of the menu's HTML structure post applying mmenu. The code showcases a menu with 4 main pages (index, page1, page2, and page3) and 3 subpages (2.1, 2.2, 2.3).
<nav id="nav" class="mm-menu mm-horizontal mm-offcanvas mm-hasheader mm-current mm-opened">
<ul class="mm-list mm-panel mm-opened mm-current" id="mm-0">
<li class="mm-selected">
<a href="#/index">Index</a>
</li>
<li>
<a href="#/page1">Page 1</a>
</li>
<li>
<a class="mm-subopen mm-fullsubopen" href="#mm-1"></a>
<span>Page 2</span>
</li>
<li>
<a href="#/Page 3">Page 3</a>
</li>
</ul>
<ul class="mm-list mm-panel mm-highest" id="mm-1">
<li class="mm-subtitle">
<a class="mm-subclose" href="#mm-0">Page 2</a>
</li>
<li>
<a href="#/page2-1">Page 2.1</a>
</li>
<li>
<a href="#/page2-2">Page 2.2</a>
</li>
<li>
<a href="#/page2-3">Page 2-3</a>
</li>
</ul>
</nav>
If anyone has insights on how I could achieve this desired functionality, your input would be highly appreciated!