Jump to content
dpuk44

Ahhh! How to assign active class to menu item

Recommended Posts

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>
</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 -->

 

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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' ?>

<ul>
    <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. */
</ul>



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

Share this post


Link to post
Share on other sites

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

<?php
//First let's grab the current document name from the url
$page=substr($_SERVER["SCRIPT_NAME"],strrpos($_SERVER["SCRIPT_NAME"],"/")+1);

//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">
 <?php
​//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>
 <?php
 } //end loop
 ?>
</ul>
Edited by Nillervision

Share this post


Link to post
Share on other sites

 

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

<?php
//First let's grab the current document name from the url
$page=substr($_SERVER["SCRIPT_NAME"],strrpos($_SERVER["SCRIPT_NAME"],"/")+1);

//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">
 <?php
​//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>
 <?php
 } //end loop
 ?>
</ul>

This is definitely a better approach but more complicated for someone who might be a bit newer to php. I almost went down this route but felt it was a bit more complicated. Apologies to the OP if they're actually more experienced than I'd assumed.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now


  • Recently Browsing

    No registered users viewing this page.

  • Member Statistics

    • Total Members
      57,522
    • Most Online
      4,970

    Newest Member
    Arnie
    Joined
  • Forum Statistics

    • Total Topics
      65,733
    • Total Posts
      455,383
×