Side-nav keep selected menu point active

Topic: Side-nav keep selected menu point active

LavazzaNordic pro asked 7 years ago

Adding "Active" to a menu point does not do what expected - is there a diferrent class name?  <li><a class="waves-effect active" href="@item.Url"><i class="fa fa-hand-pointer-o"></i> @item.Name</a></li>

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

Add comment

TonyO pro answered 5 years ago

0 0 Best answer

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?

Add comment

Basil Buwalda free answered 5 years ago

0 0 Best answer

Hi, Any resolution on this problem?

I am experiencing the same issue.

Bartłomiej Malanowski staff commented 5 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");

});

Please insert min. 15 characters.

Add comment

mdbpenguinglu pro answered 6 years ago

0 0 Best answer

Please insert min. 20 characters.

I tried putting 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, Sebastian

Add comment

Write

Create snippet

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue

ForumUser: Pro
Premium support: No
Technology: MDB jQuery
MDB Version: -
Device: -
Browser: -
OS: -
Provided sample code: No
Provided link: No

LavazzaNordic

Pro User 0Support score
1Questions 0Answers 0Snippets