Jump to content

- - - - -

Ahhh! How to assign active class to menu item

  • Please log in to reply
5 replies to this topic

#1 dpuk44


    Advanced Member

  • Members
  • PipPipPip
  • 398 posts

Posted 15 February 2017 - 03:17 PM

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?
<!-- 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>
<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>
<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>
<li><a href="#">Contact</a></li>
<!-- end navigation -->


#2 TimW


    Dedicated Member

  • Members
  • PipPip
  • 135 posts
  • Gender:Male
  • Location:West Country
  • Experience:Intermediate
  • Area of Expertise:Nothing

Posted 16 February 2017 - 12:25 AM


Edited by TimW, 16 February 2017 - 12:27 AM.

#3 dpuk44


    Advanced Member

  • Members
  • PipPipPip
  • 398 posts

Posted Yesterday, 05:06 PM

Dont understand!

#4 Fuzzy Logic

Fuzzy Logic

    Web Guru

  • Gold Membership
  • 1,278 posts
  • Gender:Male
  • Location:Kent uk
  • Experience:Advanced
  • Area of Expertise:Designer

Posted Yesterday, 08:32 PM

I would use an isset, add a variable to the menu equal to 1, then isset if condition that if the variable exists, display the class.

There is probably a better way though as my php knowledge is lacking.



    Chief Troll Hunter

  • Privileged
  • PipPipPipPipPip
  • 1,503 posts
  • Gender:Male
  • Location:Eastbourne, East Sussex
  • Experience:Intermediate
  • Area of Expertise:Web Developer

Posted Today, 10:09 AM

An easy way of doing it would be include a 'core' file in every page (you might already be doing this) and store a variable named $menu within it. If you include this core file on every page, you'll be able to update the value of that value on each page.
<?php require_once 'core.inc.php' ?>

    <li class="<?php echo $menu==='home'    ? 'active' : ''; ?>">Home</li>
    <li class="<?php echo $menu==='about'   ? 'active' : ''; ?>">About</li>
    <li class="<?php echo $menu==='contact' ? 'active' : ''; ?>">Contact</li>
/* etc. */

The logic inside those menu items basically says 'is the menu variable equal to 'home'? If yes, echo 'active' otherwise echo nothing.
All you need to do then is update the value of $menu at the top of each of your pages (or inside the page's controller if you're using one).
I hope that helps? I've tried to make it as simple as possible.

Edited by NOCK, Today, 10:10 AM.

#6 Nillervision



  • Privileged
  • PipPipPipPipPip
  • 1,566 posts
  • Gender:Male
  • Location:Copenhagen, Denmark
  • Experience:Advanced
  • Area of Expertise:Web Designer

Posted Today, 05:14 PM

You dont even need a variable on every page you could simply check if the file name matches the name of the menu item.


Your nav.inc.php file could look something like this then

//First let's grab the current document name from the url

//Next replace the fileextention with nothing from our grabed string
$page=str_replace(".php","", $page);

//Lets set the first letter in our page variable to UPPERCASE
$page = ucfirst($page);

//Now create an array with all your pages' link titles as keys and all your links as values
//This is the only code you need to update when crating a new page

$navigation = array(
	"Home" => "home.php",
	"About" => "about.php",
	"Sites" => "sites.php",
	"Contact" => "contact.php"
<!--Create the menu-->
<ul id="nav">
​//We can now loop through the array to generate the menu and add a class name if the page name matches the menu name
 foreach ($navigation as $linkName=>$link) {
  <li><a href="<?php echo $link; ?>" <?php if($page == $linkName) { echo "class='active'"; } ?>><?php echo $linkName; ?></a></li>
 } //end loop

Edited by Nillervision, Today, 05:41 PM.

7 user(s) are reading this topic

4 members, 3 guests, 0 anonymous users