Identify Design.net
The Digital Development Resource

home articles features tutorials basics coding css photoshop PHP flash security

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:

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.

We want a variable for every section. So, above our stylesheet, we want to add the following code: We've now defined our variables if they've not already been defined. 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. 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:

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

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.

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

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:

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.

© Identify Design 2009 · Legal Disclaimer