Smart Navigation
Assumptions: Basic HTML, CSS and PHP know-how.
Using an include file for your web site's navigation has great benefits. What if your client wants to change the name of a navigation item? Instead of making the change in multiple locations you just change one file and it will be reflexed throughout the site.
But what if you want to display some kind of visual aid to help the user know what section they're in? You create an onstate. Well if you're using an include file it doesn't really work. There's only one instance of the navigation code so how do you tell the navigation what page is current? With the help of some basic conditional code you can pull it off. Let's go through the process step by step.
First we'll need to create our separate PHP file for the navigation. Only the navigation code needs to be in this file. I'm going to keep it simple so mine looks like this:
<ul>
<li><a href="index.php">Home</a></li>
<li><a href="about.php">About</a></li>
<li><a href="contact.php">Contact</a></li>
</ul>
There's nothing new here. Now let's move on. We'll return to this include file to make it smarter very soon.
In order for the navigation to know what page is current we'll need to identify each page. To do this we'll assign a PHP variable called "current_page" on the first line of every page. The following is what I placed on the first line of my " About Us" page.
<?php $current_page="About Us" ?>
Let's return to our include file. This is where we'll make the navigation smarter by adding a PHP function. This function will take the value of a nav item and compare it to the value of the current page. If the values match it will write the code for the onstate.
Place the following PHP code on the first line of the include file.
<?php
function findout($nav_item){
global $current_page;
if( $current_page == $nav_item){
print "id=\"current\"" ;
}
}
?>
You'll see the name of the function is "findout" and it accepts a variable called "nav_item". It then grabs the "current_page" variable from the current page and compares it to "nav_item". If "current_page" and "nav_item" are the same it prints out the code that gives the navigation item an onstate (id="current").
Okay that was the hardest part. Are you calm? Be calm.
Now that the intelligence is in place we just need to have each navigation item ask if they're the current navigation item. We'll call the function and send each "nav_item" value like so:
<ul>
<li <?php findout("Projects"); ?> ><a href="index.php"><span>Projects</span></a></li>
<li <?php findout("Tutorials"); ?> ><a href="tutorials.php"><span>Tutorials</span></a></li>
<li <?php findout("Contact"); ?> ><a href="contact.php"><span>Contact</span></a></li>
</ul>
The code above in bold needs to be added to the list. Notice that it sends its value to the function (i.e Projects, Tutorials, etc.). If the navigation value is equal to the current page value then the onstate code is applied to the li tag.
That's it. This is a solution for implementing onstates for navigational items that sit in an include file. There's always more that can be done to improve on this so use what you can and have fun building upon it.
Questions? Contact me