CODEWITHSUNDEEP
javascriptphpjquerytwitter-bootstrapadminlte
JeroenM
JeroenM

Reputation: 837

Menu active current page

I'm using Bootstrap (AdminLTE) and I want to make the current page's menu item active. Problem is, I don't know how to do it. I do have a few solutions in mind (besides changing it in every php file), like putting an IF statement for every link, which would be a terrible solution (I think).

      <ul class="sidebar-menu">
        <li class="header">HOOFD MENU</li>
        <li class='treeview'>
          <a href='#'>
            <i class='fa fa-dashboard'></i> <span>Dashboard</span>
            <span class='pull-right-container'>
              <i class='fa fa-angle-left pull-right'></i>
            </span>
          </a>
          <ul class='treeview-menu'>
            <li><a href='account.php'><i class='fa fa-circle-o'></i>Account</a></li>
          </ul>
        </li>
</ul>

The above is part of the menu. So the menu item (in this case Dashboard) and sub-menu item both have to become active.

Thanks in advance!

Upvotes: 0

Views: 10513

Answers (4)

Brockenstein
Brockenstein

Reputation: 86

So you should always check to make sure the element exists so you don't get any errors and you can user jQuery's data attribute selector to easily target the correct links.

var href = window.location.pathname;

if( $(".sidebar-menu a[href='"+href+"']").length ) {
    $(".sidebar-menu a[href='"+href+"']").parent('li').addClass('active');
}

If you are using absolute urls you may need to switch from .pathname to .href in the var

Upvotes: 0

Adriano Pedro
Adriano Pedro

Reputation: 437

In one simple line:

$("ul.sidebar-menu li a[href='"+document.location.pathname+"']").parents('li').addClass('active');

Upvotes: 2

Yannick MOLINET
Yannick MOLINET

Reputation: 69

This solution work with sublevel menu. Need JQuery

<script type="text/javascript">
    $(document).ready(function () {
        var url = window.location;
        var element = $('ul.sidebar-menu a').filter(function () {
            return this.href == url || url.href.indexOf(this.href) == 0;
        });
        $(element).parentsUntil('ul.sidebar-menu', 'li').addClass('active');
    });
</script>

Upvotes: 4

A B Catella
A B Catella

Reputation: 308

Try this. This was copied from other bootstrap admin template and modified for AdminLTE

    <script>
    $(document).ready(function() {
        var url = window.location; 
        var element = $('ul.sidebar-menu a').filter(function() {
        return this.href == url || url.href.indexOf(this.href) == 0; }).parent().addClass('active');
        if (element.is('li')) { 
             element.addClass('active').parent().parent('li').addClass('active')
         }
    });
    </script>

Upvotes: 5

Related Questions