Tutorials > Franciart.com Navigation Tabs

The navigation might look like a lot of code since each tab has a different image (I am not following my own advice here, if you’ve read my suggestions for designing for the web), but in fact it’s actually very little code.

All of my navigation links are in this array:

It’s good practice to keep your navigation links into an array (or variables) because pages get moved occasionally and this way, if I move something to a different folder or rename the page, I know that I only have to change the link in one place and all the other links across the site will change accordingly. I don’t use hardcoded links, for example I link to the tutorials page this way:

The images are named using the key in the array. I put the word "tab" in front of them, so that I know right away if I glance at the images folder, what that image is about. It’s good to be as descriptive as possible in naming things. So my standard is this: tab_key.jpg and tab_key_over.jpg, where key is "home", "about_me" etc...

Now that I have this set up, all I have to do is cycle through the array to line the tabs out and to highlight the current one by checking if the key matches the $_SERVER['PHP_SELF'], which returns the current file.