Trendy Active CSS Tabs
You know how CSS navigation is all the rage, and that some people are going as far as having the current tab a different colour or style so that people know what page they’re on? Well, it’s easier to achieve than you think. No fiddling with JavaScript, no messing with multiple header includes so you can assign a unique id to each body tag on each page, just a simple php function:
function get_navigation($page) {
$page = str_replace('.php', '', $page);
$nav = array(
"<a href='link1.php'>1</a>",
"<a href='link2.php'>2</a>",
"<a href='link3.php'>3</a>"
);
echo "<ul id='navigation'>";
foreach ($nav as $link) {
echo "<li";
if (preg_match("/($page)/i", $link)) {
echo " class='active'";
}
echo ">$link</li> n";
}
echo "</ul>";
}
Just include the function in a file on every page that you want the navigation on if you’ve already got headers/footers, put it in your header and then call your navigation where you want it like so:
get_navigation(basename($_SERVER['SCRIPT_FILENAME']));
Isn’t that great? :) Ok, so it’s not, I know there are two things at least in that function which would be tidied a little, but it works! Hoorah. If you need an explanation of how it works or how to use it, check out the details on CodeGrrl. The things I do when I’m bored, eh?
Edit (23rd May 06): or use Matt’s, which is much tidier and more efficient.
Vera said:
On 26 Apr at 10:58 am
Interesting… especially since my next layout will be converted to one such different tab for the current one… but I’ve already implemented that :PPP So maybe next time. Anyway, I’m alredy using your advanced mailing form ;) Besides, this is a useful pastime.
Carly said:
On 26 Apr at 1:17 pm
WOW! WOW!!! WOWOWOW!!! I’ve been looking for something like this for ages…. Thanks Jem :)
Montoya said:
On 26 Apr at 2:17 pm
Another option is to actually remove the link on the current page, which is easy if you store your navigation as an associative array, and then don’t echo the value when you get to the current page in the loop. And just to warn everyone, this doesn’t work in programs like WordPress where everything runs off the same script.
Amelie said:
On 26 Apr at 3:37 pm
I want me some trendy CSS tabs. Oh yes. …can’t be bothered to fiddle with CSS though. *Lazy*
Jenny said:
On 26 Apr at 4:27 pm
I should use that one day, I usually just use lots of if statements. :(
Sparky said:
On 26 Apr at 11:04 pm
Hehe… very cool. My new site has a tabbed layout but I was unaware of it being any trend… I just decided I didn’t want a sidebar for the theme…. so I guess it’s unoriginal now? :(
Travis said:
On 27 Apr at 3:13 am
I’ve been curious as to how that was done for the past little while. The whole way I can find to do it was by manually changing the class on each page.. but that just doesn’t work when you use includes, etc. If I ever decide to try that nifty method, I’ll know where to come. :)
Jamie said:
On 27 Apr at 3:30 am
Yay.. my idea sparked this. I actually have never seen a site that functions fully on CSS do this. I got the idea from the new CG layout by the lovely Sasha but I LOVE you for figuring out a way to do this. :)
Amelie said:
On 27 Apr at 8:31 am
Pssst… You might want to escape the quotes here: echo “”; :P
Amelie said:
On 27 Apr at 8:32 am
…oh balls, your thingy filtered it out. Well, the line that echos the unordered navigation list, ul id=”navigation”. The quotes should be escaped there. :)
Jem said:
On 27 Apr at 8:33 am
Oh arse. They were escaped. I think my blog ate the backslashes.
Amelie said:
On 27 Apr at 9:09 am
CG does that. Annoying.
Amelie said:
On 27 Apr at 9:09 am
Oh yeah, same goes for the class=”active” line… Those need escaping as well. *Spams*