jemjabella

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.

Comments

There are currently 13 approved responses to "Trendy Active CSS Tabs".

1. 

   Vera 26/04/06 at 10:58 #

   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.

2. 

   Carly 26/04/06 at 13:17 #

   WOW! WOW!!! WOWOWOW!!! I've been looking for something like this for ages.... Thanks Jem :)

3. 

   Montoya 26/04/06 at 14:17 #

   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.

4. 

   Amelie 26/04/06 at 15:37 #

   I want me some trendy CSS tabs. Oh yes. ...can't be bothered to fiddle with CSS though. *Lazy*

5. 

   Jenny 26/04/06 at 16:27 #

   I should use that one day, I usually just use lots of if statements. :(

6. 

   Sparky 26/04/06 at 23:04 #

   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? :(

7. 

   Travis 27/04/06 at 03:13 #

   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. :)

8. 

   Jamie 27/04/06 at 03:30 #

   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. :)

9. 

   Amelie 27/04/06 at 08:31 #

   Pssst... You might want to escape the quotes here: echo ""; :P

10. 

    Amelie 27/04/06 at 08:32 #

    ...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. :)

11. 

    Jem 27/04/06 at 08:33 #

    Oh arse. They were escaped. I think my blog ate the backslashes.

12. 

    Amelie 27/04/06 at 09:09 #

    CG does that. Annoying.

13. 

    Amelie 27/04/06 at 09:09 #

    Oh yeah, same goes for the class="active" line... Those need escaping as well. *Spams*