Jump to content

Including Your Navbar? Use Php To Set Class "active"


evhwanabe

Recommended Posts

First off, let me start by saying I am not an expert in PHP, but I got this work and thought maybe other people could use it. I ran into a problem on my last project where I was using a php include for my navigation bar, No big deal right? But I also wanted to be able to change the class of my active page/link on each page so the button/link looked like it was pressed down. Look here to see what I mean. This is no sweat if you have your nav code on each page, you would just set the class to "active" or whatever and you would be good to go. I wrote this little script to basically check what page I am on, and then set the class active for that page. I now have a php include navbar that knows what page you are currently on and changes the link class accordingly. I am not going to get into the css side of this. I will save that for another time lol.

 

><?
if ($PHP_SELF != '/page1.php')
{ $page1 = 'none'; } else { $page1 = 'active'; }
if ($PHP_SELF != '/page2.php')
{ $page2 = 'none'; } else { $page2 = 'active'; }
if ($PHP_SELF != '/page3.php')
{ $page3 = 'none'; } else { $page3 = 'active'; }
if ($PHP_SELF != '/page4.php')
{ $page4 = 'none'; } else { $page4 = 'active'; }
?>
<ul id="nav">
<li><a href="/page1.php" class="<?echo $page1;?>">page1</a></li>
<li><a href="/page2.php" class="<?echo $page2;?>">page2</a></li>
<li><a href="/page3.php" class="<?echo $page3;?>">page3</a></li>
<li><a href="/page4.php" class="<?echo $page4;?>">page4</a></li>
</ul>

 

Like I said, I am not an expert, so if you know of a better way please share.....

 

:)

Link to comment
Share on other sites

evhwanabe, I do something very similar with one of my nav menus. The only thing I would suggest is that you could use the ternary operator to tighten up the code. For those who don't know, the ternary operator is a slick shorthand for if-then statements; see for example this tutorial

 

in your case, the whole code snippet could be shortened to:

 

><?php
echo '<ul>';

echo ($PHP_SELF == '/page1.php') ? 
'<li><a class="active" href="/page1.php">Page One</a></li>' :
'<li><a class="none" href="/page1.php">Page One</a></li>';

echo ($PHP_SELF == '/page2.php') ? 
'<li><a class="active" href="/page2.php">Page Two</a></li>' :
'<li><a class="none" href="/page2.php">Page Two</a></li>';

echo ($PHP_SELF == '/page3.php') ? 
'<li><a class="active" href="/page3.php">Page Three</a></li>' :
'<li><a class="none" href="/page3.php">Page Three</a></li>';

echo ($PHP_SELF == '/page4.php') ? 
'<li><a class="active" href="/page4.php">Page Four</a></li>' :
'<li><a class="none" href="/page4.php">Page Four</a></li>';

echo '</ul>';
?>

 

I've formatted it to make it easier to read, but that's really just six lines of code total. And it even includes the commands to print out the <ul> and each individual <li>, so that doesn't have to be a separate part of your code. For me, it's easier to maintain -- if I need to rename page2.php, all the instances of "page2.php" are right in one area of the code.

 

(Not that I'm a fan of the ternary operator or anything... ok, I am. Just a little bit. But it's such a neat little snippet.)

Link to comment
Share on other sites

evhwanabe, I do something very similar with one of my nav menus. The only thing I would suggest is that you could use the ternary operator to tighten up the code. For those who don't know, the ternary operator is a slick shorthand for if-then statements; see for example this tutorial

 

in your case, the whole code snippet could be shortened to:

 

><?php
echo '<ul>';

echo ($PHP_SELF == '/page1.php') ? 
'<li><a class="active" href="/page1.php">Page One</a></li>' :
'<li><a class="none" href="/page1.php">Page One</a></li>';

echo ($PHP_SELF == '/page2.php') ? 
'<li><a class="active" href="/page2.php">Page Two</a></li>' :
'<li><a class="none" href="/page2.php">Page Two</a></li>';

echo ($PHP_SELF == '/page3.php') ? 
'<li><a class="active" href="/page3.php">Page Three</a></li>' :
'<li><a class="none" href="/page3.php">Page Three</a></li>';

echo ($PHP_SELF == '/page4.php') ? 
'<li><a class="active" href="/page4.php">Page Four</a></li>' :
'<li><a class="none" href="/page4.php">Page Four</a></li>';

echo '</ul>';
?>

 

I've formatted it to make it easier to read, but that's really just six lines of code total. And it even includes the commands to print out the <ul> and each individual <li>, so that doesn't have to be a separate part of your code. For me, it's easier to maintain -- if I need to rename page2.php, all the instances of "page2.php" are right in one area of the code.

 

(Not that I'm a fan of the ternary operator or anything... ok, I am. Just a little bit. But it's such a neat little snippet.)

 

 

Cool owatagal,

Thanks for the tip!

Link to comment
Share on other sites

  • 2 months later...

><?php
echo '<ul>';
$navList = array('One','Two','Three','Four');
foreach($navList as $k=>$v)
{
$x = $k+1;
$class = ($PHP_SELF == '/page'.$x.'.php') ? 'active' : 'none';
echo '<li><a class="'.$class.'" href="/page'.$x.'.php">Page '.$v.'</a></li>';
}
echo '</ul>';
?>

 

It's a little shorter... but more importantly, it's easier to reuse on a new site.

Edited by surefire
Link to comment
Share on other sites

  • 3 years later...

Does anyone know how you would do this with two active states? i.e. I'm using genres: so film/action is an example. What I think I need to be able to do is detect the (directory) level higher as well as the current level... So if you're on film/action(/index.php) both film and action would be the active states. Is this going to be possible?

 

Cheers,

Theo.

Edited by theo
Link to comment
Share on other sites

Is there a way of extracting (separating out) the information from $PHP_SELF ?

 

Well I've done it using this function:

 

<?php

function public_base_directory()

{

//get public directory structure eg "/top/second/third"

$public_directory = dirname($_SERVER['PHP_SELF']);

//place each directory into array

$directory_array = explode('/', $public_directory);

 

return $directory_array[1];

}

?>

 

It seems to work OK, but will have to see if I run into any problems with it later.

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...