Identify Design
100% Giraffe Approved

Searching for all articles in the PHP category...

Giraffe
Avatar of Woody

by Woody

Archive: Dynamic, Section Specific Tabbed Navigation

Wednesday May 20th, 2009 in PHP Tutorials

Attention

This post is an archived post. This means it is old or has been archived for rewriting in the near future. Please be aware that the contents of this article or page may be out of date. If you need assistance be sure to leave comments and our community can help you.
If you've browsed around some blogs or portfolio sites lately you've probably noticed interactive tabbed navigation with links that change colour and backgrounds depending on which section of the site we're browsing. In this tutorial we're going to expand on our previous tutorial; Simple Hover Over Navigation Bars.
Interactive tabs that change colours, backgrounds and style when you hover over them are a nifty feature to any site's navigation. What's even niftier is when the state of these links is controlled by the page the user is browsing. This extra level of interactivity really helps the user feel like they're having a control over the style of your pages.

For an example of what we're going to be doing is in Identify Design's very own header. If you click on a link in the header, the link stays black and highlighted when browsing around that section.

To start off, we need the links with which to work with. From our previous tutorial we have four horizontal links ready to work with. You don't need to use our links, though. You can obviously substitute this tutorial into your own page.

For anyone who is following with our code, here it is:

<style type="text/css">

#links-wrapper a {

display: block;

font-family: Verdana;

float: left;

padding: 4px;

background: #000;

color: #fff;

}

#links-wrapper a:hover {

display: block;

font-family: Verdana;

float: left;

padding: 4px;

background: #fff;

color: #000;

}

</style>

<div id="wrapper">

<div id="links-wrapper">

<a href="/">Hyperlink One</a>

<a href="/">Hyperlink Two</a>

<a href="/">Hyperlink Three</a>

<a href="/">Hyperlink Four</a>

</div>

</div>

Adding Markets to the Links

We first of all want to setup the links so their class will change depending on which sections we're browsing. We're going to change the class of our links with variables; a variable for each section that will be used to control the formatting of individual section links.

In our example, we have four links. We're going to give them names now; Home, News, About, Links. First of all we're going to tell the Home link to show a grey background in the event the user is browsing the homepage.

Before we do this, though, we need to define the variables. In order to stop the variables being defined the URL, we're going to check to see if they're set using the isset(); function. This function checks to see if a variable is set and if not, set them ourselves to stop other people doing so.

Since we're going to be defining our variables on our pages, though, we want to see if they're not set. We use an exclamation mark to ask whether something isn't set or not.

Exclamation marks are used in PHP as a sign of checking the opposite of a function. For example, using an exclamation mark with isset(); will ask PHP to see if the variable hasn't been set. Using it with an equals if will ask if it doesn't equal something; such as if($variable != 0); will return TRUE if $variable doesn't equal zero.
We want a variable for every section. So, above our stylesheet, we want to add the following code:
<php

if(!isset($link_home)) {$link_home=0;}

if(!isset($link_news)) {$link_news=0;}

if(!isset($link_about)) {$link_about=0;}

if(!isset($link_links)) {$link_links=0;}

?>

We've now defined our variables if they've not already been defined.
Important!
Web parsers will use the last defined variable when a variable is defined multiple times, in ascending order. This means the latest definition of a variable will be used as its value. It's important to make sure any page-specific variables (such as the ones we'll be using) are defined before you include your configuration, functions or header file.
Asking whether they're set will not interfere with any variables we've defined on our pages, but will set the variables if they haven't been already to stop other people doing it. If we don't set them, somebody could visit our address and add the ?link_home= on the end and input anything they like into our source.
Very Important!
Always define variables. Any undefined variables can be manipulated in the address of your pages in the event a viewer figures out or learns which variable names you're using.
With the variables defined, we can later modify them on a page-by-page basis without risking somebody entering them in the URL and trying to inject something onto our site (For more security tips visit our Site Security Tutorials section).

Now we want to add the code to our links to make them dynamically change classes when we browse one of the above sections. To do this, we use a simple IF command. We're going to tell our code to check whether our variable is bigger than zero. If it is, we'll display a different class than normal.

We do this with the following code:

if($link_home > 0){

echo "link-highlight";

} else {

echo "link";

}

What this is doing is checking whether the $link_home variable is set to a number higher than zero. If it is, we're going to display the link-highlight link class to make this link display as our highlighted class. If it's not set above zero, we'll display the default link class instead. We want to place this code in where our stylesheet class would go, like so:
<a href="/" class="< ?

if($link_home > 0){

echo "link-highlight";

} else {

echo "link";

} ?>">Home</a>

<a href="/">News</a>

<a href="/">About</a>

<a href="/">Links</a>

Repeat this process for all four links, replacing $link_home with the other three variables where applicable. Our code should now look like this, with all four links's classes being dynamically defined:
<a href="/" class="< ?

if($link_home > 0){

echo "link-highlight";

} else {

echo "link";

} ?>">Home</a>

<a href="/" class="< ?

if($link_news > 0){

echo "link-highlight";

} else {

echo "link";

} ?>">News</a>

<a href="/" class="< ?

if($link_about > 0){

echo "link-highlight";

} else {

echo "link";

} ?>">About</a>

<a href="/" class="< ?

if($link_home > 0){

echo "link-links";

} else {

echo "link";

} ?>">Links</a>

Before we add the dynamic code that'll define our links's classes to our pages, we have to define them in the stylesheet first! We showed you define stylesheet classes in the previous tutorial. We're going to set link to the same values as we did every link and set link-highlight to a grey background and white text.

This is easily done:

<style type="text/css">

.link {

display: block;

font-family: Verdana;

float: left;

padding: 4px;

background: #000;

color: #fff;

}

.link:hover {

display: block;

font-family: Verdana;

float: left;

padding: 4px;

background: #fff;

color: #000;

}

.link-highlight {

display: block;

font-family: Verdana;

float: left;

padding: 4px;

background: #434343;

color: #fff;

}

.link-highlight:hover {

display: block;

font-family: Verdana;

float: left;

padding: 4px;

background: #222;

color: #fff;

}

</style>

Notice how we removed the link formatting on links-wrapper. Since we're defining the links with specific classes, we want to both ensure we're not defining any formatting unintentionally and also use as little space as possible. Unnecessary CSS will increase load times!
With our classes defined, it's time to refresh the page. Nothing should happen. "Huh?" you might ask; well, nothing should happen yet. We haven't defined any of the variables yet, neither have we actually changed anything except how the links are getting their formatting. They're still being formatted the same, only now instead of formatting their parent, we're formatting each link.

So now it's time to define which links are highlighted as an active section depending on what pages we browse.

Setting Variables Depending on Page

Let's assume your pages are called "index.php", "news.php", "about.php", "links.php". We need to add a small snippet of code to each of these pages that will tell our code when to classify a link as used. In order for this to work, though, you need to have the stylesheet and our pre-defined variables in a header file being included on each of these pages. Including is simple and allows easier editing of pages. If you haven't already, be sure to read up on how to dynamically include pages.

Just in case, here's the include command we're using to include our header file, "header.php", that's in the main directoy of our server.

<php

include("header.php");

?>

Inside the header file should be your stylesheet, your links and the variables we're defining. Now we're going to edit index.php and tell it we're browsing our index variable. To do this, we simply set the variable above our include. Since we defined our if statement as BIGGER THAN ZERO, we can use any number to display our home link as active.
<php

$link_home = 1;

include("header.php");

?>

With this variable defined, our "Home" link in the browser will now be using the link-highlight class and stand out from the rest! Repeat the above process with every page, replacing home with our earlier variables. Now, depending on which section of your site your users browse, the navigational tabs will change backgrounds to indicate the active link!
Remember...
You must set the variable before you include the header file with the links in. Otherwise the links will not dynamically display because they're being parsed before we set our variables to bigger than zero. Any variables defined before an include to control page generation must always be defined before we include.

Taking This Further...

We can even take this a step further and use it in other parts of our site. If you're browsing around pages and you have a right hand column with section images, we can use our if statement we used earlier to change the image being used. Use a pale image with lowered opacity for when it's not your active section and use the original image when you're browsing that section!

Interactive tweaks such as these make viewers feel more involved with their browsing experience and makes them feel they have more control over your pages.

Our final, combined code looks like this:

Header.php:
<style type="text/css">

.link {

display: block;

font-family: Verdana;

float: left;

padding: 4px;

background: #000;

color: #fff;

}

.link:hover {

display: block;

font-family: Verdana;

float: left;

padding: 4px;

background: #fff;

color: #000;

}

.link-highlight {

display: block;

font-family: Verdana;

float: left;

padding: 4px;

background: #434343;

color: #fff;

}

.link-highlight:hover {

display: block;

font-family: Verdana;

float: left;

padding: 4px;

background: #222;

color: #fff;

}

</style> <php

if(!isset($link_home)) {$link_home=0;}

if(!isset($link_news)) {$link_news=0;}

if(!isset($link_about)) {$link_about=0;}

if(!isset($link_links)) {$link_links=0;}

?> <a href="/" class="< ?

if($link_home > 0){

echo "link-highlight";

} else {

echo "link";

} ?>">Home</a>

<a href="/" class="< ?

if($link_news > 0){

echo "link-highlight";

} else {

echo "link";

} ?>">News</a>

<a href="/" class="< ?

if($link_about > 0){

echo "link-highlight";

} else {

echo "link";

} ?>">About</a>

<a href="/" class="< ?

if($link_home > 0){

echo "link-links";

} else {

echo "link";

} ?>">Links</a>

Index.php / News.php / About.php / Links.php
Be sure to replace $link_home with the appropriate variable on a different page to index.php.
<php

$link_home = 1;

include("header.php");

?> <p /> Blah blah blah, Waffle, Drone...