Flexible navigation with PHP

The navigation woe
How to gain flexibility
The page template.
The nav.php script
Download and known issues

The navigation woe

All of you who ever coded a web site for a third party (customer,friends) know the problem: You code all the HTML by hand and after you finished they want some new menu item, a different order or want one deleted "till the next month".

Now you either change all the HTML pages by hand or use search + replace in the whole folder, which is a very handy approach, resulting in complete disaster in 90% of the cases.

A way to spare you this work is to use PHP to generate the navigation. Take a look at this. It is fully generated from a small script. All you need to do is to tweak it for your purposes and name your pages the same way you name the entries in the menu. But let's take one step at a time.

How to gain flexibility

How to make the navigation flexible?

It is actually pretty easy. All you need to have is a list of all the pages you want in your navigation, and a mean of knowing which one you are visiting right now.

The display of the page you are on should be highlighted, the others should be links.

Keep your navigation in one file and include it into every page.

To tell the script which page you are on right now, you use the $HTTP_SERVER_VARS['REQUEST_URI'] variable of PHP.

This variable displays the whole path of the document, you are right now looking at.

This is something you can tweak a bit and compare to your list of pages. You should set up all your pages the same way, as a template. Let's take a look at an example of a template

The page template.

line 4 gets the current URI and splits it at "/", we use that to get the name only.

line 5 splits that result at the "." to get rid of the extension

line 6 replaces every underscore in the name with a space and makes each word start with an uppercase character, this is for display reasons only.

line 8 adds this information to your page title, this way you don't need to hardcode the titles either.

in line 15 you include our navigation script.

Now you save the document with a name that is the same as it's display.

For example, if you want our script to display "About Us", you'll call the document "about_us.php".

Generate all your pages from this template and keep up this naming convention.

Beware: If the name of the document does not match the one in the list, the navigation script will not work.

The next step now is the navigation script.

The nav.php script

line 1 defines all the entries of the navigation, make sure that these values match the actual filenames without extensions.

line 3 retrieves the name of the current site for comparison.

line 4 starts looping over all the entries.

line 6 compares the currently displayed page with the one of the list, and displays the highlighted name without underscores. Each word gets converted to start with an uppercase character (as defined in line 5).

lines 10-12 display a link for all the other sites of our list.

line 14 puts a pipe character ("|") in between the links, but not after the last one.

And that is it! As simple as that. If you now create a new page with the template, you simply add it to the list in line 1 and it will display throughout the whole site.

With a bit of skill and the right naming conventions you can also do a graphical rollover navigation with the same script.

Now, download this demo page and have a look at it.

Download and known issues

To play with this idea of navigation simply take a look at the sources in the demopage, I added some explanations there.

This navigation only works with one level navigations, so if there is some sub-menues to one menu item you need to extend it.

You also need to change the script if you want different names for filename and display on the page.

Have fun with this idea, it saved me some headache already.