update sidebar main-menu and sub-menu class based on url

Question

I've asked this question here but another problem came up so I decided to keep the old one for reference purposes. Old question here.

The old question was just about updating the class of a main-menu based on the url but now things have changed. I will provide the new sidebar below.

Sidebar without any active class yet

<div class="sidebar-scroll">
  <div id="sidebar" class="nav-collapse collapse">
    <!-- BEGIN SIDEBAR MENU -->
      <ul class="sidebar-menu">
        <li class="sub-menu">
          <a class="" href="panel-admin.php">
          <i class="icon-dashboard"></i>
          <span>Dashboard</span>
          </a>
          </li>
        <li class="sub-menu">
          <a href="javascript:;" class="">
          <i class="icon-calendar"></i>
          <span>Scheduling</span>
          <span class="arrow"></span>
          </a>
            <ul class="sub">
            <li><a class="" href="admin-foreign.php">Foreign Languages</a></li>
            <li><a class="" href="admin-esl.php">ESL Local</a></li>
            <li><a class="" href="admin-workshop.php">Summer Workshops</a></li>
            </ul>
          </li>
      </ul>
    <!-- END SIDEBAR MENU -->
  </div>
</div>

It would look like this:

Dashboard
Scheduling
--> Foreign Languages
--> ESL Local
--> Summer Workshops

As you can see Scheduling has a sub-menu.

Then how it would look like if I am on the dashboard. The sidebar would look like this

<div class="sidebar-scroll">
      <div id="sidebar" class="nav-collapse collapse">
        <!-- BEGIN SIDEBAR MENU -->
          <ul class="sidebar-menu">
            <li class="sub-menu [active]"> //without the []
              <a class="" href="panel-admin.php">
              <i class="icon-dashboard"></i>
              <span>Dashboard</span>
              </a>
              </li>
            <li class="sub-menu">
              <a href="javascript:;" class="">
              <i class="icon-calendar"></i>
              <span>Scheduling</span>
              <span class="arrow"></span>
              </a>
                <ul class="sub">
                <li><a class="" href="admin-foreign.php">Foreign Languages</a></li>
                <li><a class="" href="admin-esl.php">ESL Local</a></li>
                <li><a class="" href="admin-workshop.php">Summer Workshops</a></li>
                </ul>
              </li>
          </ul>
        <!-- END SIDEBAR MENU -->
      </div>
</div>

So the Dashboard would be highlighted in this scenario

And how it would look like if Im on any of the sub-menu under Scheduling

 <div class="sidebar-scroll">
      <div id="sidebar" class="nav-collapse collapse">
        <!-- BEGIN SIDEBAR MENU -->
          <ul class="sidebar-menu">
            <li class="sub-menu">
              <a class="" href="panel-admin.php">
              <i class="icon-dashboard"></i>
              <span>Dashboard</span>
              </a>
              </li>
            <li class="sub-menu [active]">
              <a href="javascript:;" class="">
              <i class="icon-calendar"></i>
              <span>Scheduling</span>
              <span class="arrow"></span>
              </a>
                <ul class="sub">
                <li [class="active"]><a class="" href="admin-foreign.php">Foreign Languages</a></li>
                <li><a class="" href="admin-esl.php">ESL Local</a></li>
                <li><a class="" href="admin-workshop.php">Summer Workshops</a></li>
                </ul>
              </li>
          </ul>
        <!-- END SIDEBAR MENU -->
      </div>

Since I am in the Foreign Languages section. The main header Scheduling and this Foreign Langauges would be active but different class. The active class of Scheduling is sub-menu active while Foreign Languages would just have active only.

And javascript that I've tried no longer applies here since it only handles menus without any dropdown. And it didn't work anyway

Old javascript

<script type="text/javascript">
jQuery(function($) {
var path = window.location.href; // because the 'href' property of the DOM element is the absolute path
//alert($('ul a').length);
$('ul a').each(function() { 
    if (this.href === path) {
        $(this).addClass('sub-menu active');
    }
    //alert(this.href);
});
}); 
</script>

The goal here is to put a "active" class to the section of the sidebar based on the url the user is in. I've just include('sidebar.php') this sidebar so I would only change this file rather than put a sidebar in each php page file. But then the main heading and the dropdown menu has different active classes.

Found the solution with the help of gecco. The javascript is below:

<script type="text/javascript">
   jQuery(function($) {
   var path = window.location.href; // because the 'href' property of the DOM element is the absolute path

   $('ul a').each(function() { 
      if (this.href === path) {
          $(this).addClass('sub-menu active');
          $(this).parent().closest("li").addClass('active'); //added this line to include the parent
          $(this).parent().parent().closest("li").addClass('active');
      }
   });
}); 
</script>

I was already halfway with using php to do this HAHAHAHA. if current_url = db_page_url then put echo class=active. HAHAHA.

I've added it. But it doesn't work even without the dropdown menu yet as stated in the previous old question — Dev, May 01 '15 at 06:25
Someone downgraded the question. So here I am neutralizing it — gecco, May 01 '15 at 16:21

gecco · Accepted Answer · 2015-05-01T07:30:18.847

<script type="text/javascript">
   jQuery(function($) {
   var path = window.location.href; // because the 'href' property of the DOM element is the absolute path

   $('ul a').each(function() { 
      if (this.href === path) {
          $(this).addClass('sub-menu active');
          $(this).parent().parent().closest("li").addClass('active2');
      }
   });
}); 
</script>

The only change I have done here is adding another line to your JS $(this).parent().parent().closest("li").addClass('active2');

And here is my style sheet

.active2 > a{
    color:red; //what ever the styles you want
}

OR

You can do it without a style

jQuery(function($) {
var path = window.location.href; 
$('ul a').each(function() { 
    if (this.href === path) {
        $(this).addClass('sub-menu active');
        $( this ).parent().parent().closest("li").addClass('active2');
        $('.active2 a:first').addClass('active'); //add the active class to the parent node
    }
});
});

It works only for menus that have sub menus but it doesn't highlight the currently active submenu. Only the main menu where the sub menu belongs. It doesn't work for menus that do not have sub menus. EDIT: Editted the script and it works now. Thank you! — Dev, May 01 '15 at 11:06

update sidebar main-menu and sub-menu class based on url

1 Answers1