Edelman Technologies
http://blog.edelmantech.com/content/2007/03/easy_active_tabs_using_css_and_php.php
View Full Version

Easy Active Tabs Using CSS and PHP

By David Edelman on 03.02.07
Filed Under: Site Layout

PHP includes make it easy to create and maintain a global navigation menu. Just change the included file and the entire site is instantly updated. Unfortunately, because there's only one file, it can be difficult to create an "active tab" effect like this:

So how can you stylize the current page's navigation element? With PHP, it turns out it is quite simple!

How to treat the active tab differently.

First, make sure that the destination for each one of your tabs is stored in a different directory. The name of the directory doesn't need to match the name of the link you will create. For example:

http://example.com/
http://example.com/section1/
http://example.com/section2/
http://example.com/section3/

Using a little PHP magic, you can pull out the section names.

<?php // identify the current directory
  $directory = basename(dirname($_SERVER['PHP_SELF']));
?> 

The $_SERVER['PHP_SELF'] returns the directory and file of your current url. For example, at http://example.com/section1/index.php, it would return /section1/index.php.

The dirname() directive returns the directory. It takes /section1/index.php and returns /section1.

Finally, the basename() directive returns the name of the current file or directory without extension or additional markup. For example, /section1 becomes section1.

Here's what the code above would return on various pages in our example site:

• If you are on the home page, this will return "".
• If you are at http://example.com/section1/, this will return "section1".
• If you are in http://example.com/section2/, this will return "section2".

Now, you can use a simple PHP conditional to make one of your tabs active:

<a href="/section1/"<?php if ($directory=="section1") { echo " class=\"selected\""; } ?>>Section 1</a>

If you are at http://example.com/section1/, the link above would be styled by the "selected" class in your CSS stylesheet. It's very easy to expand this to work with any number of tabs.

    <div id="topnav">
 
<?php // identify the current directory
  $directory = basename(dirname($_SERVER['PHP_SELF']));
?> 
    
      <ul id="nav">
        <li>
          <a href="/section1/"<?php if ($directory=="section1") { echo " class=\"selected\""; } ?>>Section 1</a>
        </li>
        <li>
          <a href="/section2/"<?php if ($directory=="section2") { echo " class=\"selected\""; } ?>>Section 2</a>
        </li>
        <li>
          <a href="/section3/"<?php if ($directory=="section3") { echo " class=\"selected\""; } ?>>Section 3</a>
        </li>
      </ul>
    </div>

To make the homepage active, simple set the $directory conditional equal to blank like this:

<a href="/"<?php if ($directory=="") { echo " class=\"selected\""; } ?>>Home</a>

That's it! You can now use one include file and enjoy an active tab navigation system - just like we do on our homepage.