Topic: Side-nav keep selected menu point active
LavazzaNordic pro asked 7 years ago
TonyO pro answered 5 years ago
I just put up a snippet that works and I've been using it for quite awhile...you may find this a little easier to implement
https://mdbootstrap.com/snippets/jquery/tonyo/716383
Basil Buwalda free commented 5 years ago
Thanks Tony, the challenge I had was that I use collapseable headers in the sidenav which makes things a bit more complicated.
Bartłomiej Malanowski staff commented 5 years ago
Do you ned more help?
Basil Buwalda free answered 6 years ago
Hi, Any resolution on this problem?
I am experiencing the same issue.
Bartłomiej Malanowski staff commented 6 years ago
Do you use MDB jQuery or MDB Angular?
Basil Buwalda free commented 5 years ago
Hi, I have the same problem and I am using MDB jQuery.
Bartłomiej Malanowski staff commented 5 years ago
Could you please check @Sebastian Kaczmarek answer above?
Basil Buwalda free commented 5 years ago
Hi Bartlomiej, I am using MDB jQuery not Angular, however I have found a work around for now. I include this in my HTML Page.It isn't very elegant, but at least shows the correct menu item as active.Regards Basil$
$(function () { //Set the nav items active for the current link var queryString = "a[href^='" + window.location.pathname + "']"; var activeElements = $(queryString); activeElements.addClass("active");
//Set the Collapsible Menu to active and display the menu var parent = activeElements.parents("li:eq(1)"); var collapsibleHeader = parent.children("a.collapsible-header"); collapsibleHeader.addClass("active"); var collapsibleBody = parent.children("div.collapsible-body"); collapsibleBody.css("display", "block");
});
mdbpenguinglu pro answered 6 years ago
active
but it didn't work that is nothing was highlighted. Please help.
<mdb-item> <mdb-item-head mdbRippleRadius><i class="fa fa-chevron-right active"></i>Manage</mdb-item-head> <mdb-item-body> <ul> <li><a href="/games" class="waves-effect" mdbRippleRadius>Games</a></li> <li><a href="" class="waves-effect" mdbRippleRadius>Segments</a></li> <li class="waves-effect active"><a href="/games/{{ gameId }}/tags" class="waves-effect active" mdbRippleRadius>Tags</a></li> </ul> </mdb-item-body> </mdb-item>
Sebastian Kaczmarek staff commented 6 years ago
Hi, I am redirecting this case to our Angular support. Please send your project at d.gemza@mdbootstrap.com. Our Angular team will help you. Regards, SebastianFREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- ForumUser: Pro
- Premium support: No
- Technology: MDB jQuery
- MDB Version: -
- Device: -
- Browser: -
- OS: -
- Provided sample code: No
- Provided link: No
tilvalhall pro commented 7 years ago
I second that question. How to auto-expand/highlight active menu items on page load?Sebastian Kaczmarek staff commented 7 years ago
Hi tilvalhall, Actually, there are two ways to accomplish that. First one is to use PHP. While generating the menu, you need to check if the current menu item is the one that is linked to the current page. If yes, then add class `active`. The second way is to use JavaScript, by simply checking if current link is the same as `href` attribute of the menu item. The disadvantage of this solution is that the link will obtain the class `active` after your JS script will be loaded. It will cause a little lag. Regards