Anne van Kesteren

Working tabs example

I made this really cool in PHP written example. It uses structural lists and a tabs layout borrowed from HomelessPixel. So the CSS goes to him. I did edit the CSS; I removed all the id's and replaced with a more usable strong. I used the element strong so it's impossible to click on and it gives an extra focus to where you are.

It took me about 50 minutes to come up with this. All the link names are borrowed from Nokia, which I'm not related to.

Any feedback on the PHP would be nice, since I'm not a great coder :). I just wanted to show an example how something like this could be made dynamic.

I found the original tabs example; tabs example over at HomelessPixel (Check his portfolio!). The file I created is not perfect, the hyperlinks look rather ugly and the include mechanism (hidden in the source code) is not the best solution (a database approach would be better), but everything is kept simple and understandable. You can just copy the code change the names and everything will work just fine.

A note about the arrays. In $nav is the basic navigation. If you want to extend one of these with a sub navigation list, you add an array with the name of the basic navigation you want to extend (I hope that's proper English :)). If you're changing these thing be sure to change the swich($p) fragment. That's all I think. If It won't work, please contact me without placing a comment. This time comments are for people who think my PHP coding sucks :).


  1. I did something like this for my site.

    More correctly, I would say I borrowed from a couple of sites :-)

    Posted by anand at

  2. I like very much this navbar. Clean and simple. Take a look at this examples too:

    These are great codes!

    Posted by moraes at