Jump to content
evhwanabe

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

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

 

:)

Share this post


Link to post
Share on other sites

Cool! That might come in useful for me! I appreciate it.

Share this post


Link to post
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.)

Share this post


Link to post
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!

Share this post


Link to post
Share on other sites
Cool owatagal,

Thanks for the tip!

 

 

This is just what I've been looking for but I cant get it to work as it's my first go with PHP. Can anyone either tell me which bit goes where please?

 

Pa :unsure: ul

Share this post


Link to post
Share on other sites

Welcome to the forums Paul :unsure:

 

I would save it as menu.php

and then include it in place of your current menu.

 

<?php include $_SERVER['DOCUMENT_ROOT']."/menu.php"; ?>

 

of course the page has to be a php page for it to work

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

Welcome to the forums theo ;)

 

Yes, it would be possible but I think you would want to use some content management system (CMS) like Joomla or WordPress to do it.

Share this post


Link to post
Share on other sites

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

Edited by theo

Share this post


Link to post
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.

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


×