Jump to content


Photo
- - - - -

Ahhh! How to assign active class to menu item


  • Please log in to reply
5 replies to this topic

#1 dpuk44

dpuk44

    Advanced Member

  • Members
  • PipPipPip
  • 400 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>
</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 -->

 



#2 dpuk44

dpuk44

    Advanced Member

  • Members
  • PipPipPip
  • 400 posts

Posted 18 February 2017 - 05:06 PM

Dont understand!



#3 Fuzzy Logic

Fuzzy Logic

    Web Guru

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

Posted 18 February 2017 - 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.


#4 NOCK

NOCK

    Chief Troll Hunter

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

Posted 19 February 2017 - 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' ?>

<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, 19 February 2017 - 10:10 AM.


#5 Nillervision

Nillervision

    All-rounder

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

Posted 19 February 2017 - 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

<?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, 19 February 2017 - 05:41 PM.


#6 NOCK

NOCK

    Chief Troll Hunter

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

Posted 19 February 2017 - 09:24 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

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





0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users