How to add active class to menu item

Question

I have my menu in an include file called menu.php and I want to assign a class called 'active' to the <li> to the page that I am on. How can I do this in PHP or JavaScript?

<!-- navigation -->
<nav class="navbar navbar-default" role="navigation">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" 
        data-target="#collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse" id="collapse">
<ul class="nav navbar-nav navbar-right">
  <li><a href="index.php">Home</a></li>
  <li><a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" 
         aria-haspopup="true" aria-expanded="false">Insect Control 
      <span class="caret"></span></a>
    <ul class="dropdown-menu">
      <li><a href="insect-control.php">Insect Control</a></li>
      <li><a href="ant-cockroach-control.php">Ant & Cockroach Control</a></li>
      <li><a href="bed-bug-treatment.php">Bed Bug Treatments</a></li>
      <li><a href="fly-control.php">Fly Control</a></li>
      <li><a href="wasp-hornets-bee-control.php">Wasp, Hornet & Bee Control</a></li>
    </ul>
  </li>
  <li><a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" 
         aria-haspopup="true" aria-expanded="false">Rodent & Vermin 
      <span class="caret"></span></a>
    <ul class="dropdown-menu">
      <li><a href="rodent-vermin.php">Rodent & Vermin</a></li>
      <li><a href="rats-mice-infestation.php">Rats & Mice Infestation</a></li>
      <li><a href="squirrel-control.php">Squirrel Control</a></li>
    </ul>
  <li><a href="#">Contact</a></li>
</ul>
</div>
</nav>
<!-- end navigation -->

Possible duplicate of jQuery - Add active class and remove active from other element on click — mickadoo
– mickadoo, Commented Feb 15, 2017 at 17:08
How is this a duplicate of that @mickadoo? He's asking how to do it on page load so the currently active page is highlighted — James Hunt
– James Hunt, Commented Feb 15, 2017 at 17:10
Possible duplicate of How to add active class on click and remove active on click — tao
– tao, Commented Feb 15, 2017 at 17:50

James Hunt · Accepted Answer · 2017-02-15 17:09:14Z

0

You could just set a variable before the menu.php include that tells the include what to highlight:-

$activepage = "squirrel-control";
require("menu.php");

Then on the menu:-

<li <?=($activepage=="rodent-and-vermin")?'class="active"':''?>><a href="rodent-vermin.php">Rodent & Vermin</a></li>
<li <?=($activepage=="rats-mice-infestation")?'class="active"':''?>><a href="rats-mice-infestation.php">Rats & Mice Infestation</a></li>
<li <?=($activepage=="squirrel-control")?'class="active"':''?>><a href="squirrel-control.php">Squirrel Control</a></li>

answered Feb 15, 2017 at 17:09

James Hunt

2,53813 silver badges24 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

user1548332 Over a year ago

I like this. Is this secure?

Wolverine Over a year ago

There is nothing like secure in this.

user1548332 Over a year ago

OK so this is working great. But lets say I also wanted the parent <li> to also have the class of active how would I add that as it is not a page

Wolverine · Accepted Answer · 2017-02-15 17:40:46Z

This is the JavaScript code that you might be looking for.

var requestURI = "<?= basename($_SERVER['REQUEST_URI']) ?>";
var navList = document.querySelectorAll("ul.nav li");

for(var i = 0; i < navList.length; i++) {
    var menuURL = navList[i].querySelector('a').href;
    menuURL = menuURL.substring(menuURL.lastIndexOf('/') + 1);
    if(requestURI == menuURL) {
        navList[i].classList.add('active');
    }
}

Here on the line 1, that PHP code is used to return name of the requested page. You can also make it using JavaScript alone by the following:

var requestURI = window.location.pathname;
requestURI = requestURI.substring(requestURI.lastIndexOf('/') + 1);

So, you can make it all with the JavaScript itself.

Hope it helps!

Collectives™ on Stack Overflow

How to add active class to menu item

2 Answers 2

3 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related