Auto-Selecting Navigation

In the article Centered Tabs with CSS Ethan laid out a tabbed navigation system which can be centred on the page. A frequent requirement for any tab-based navigation is to be able to visually represent the currently selected tab in some way.

If you’re using a server-side language such as PHP, it’s quite easy to write something like class="selected" into your markup, but it can be even simpler than that.

Let’s take the navigation div from Ethan’s article as an example.

<div id="navigation">
     <ul>
          <li><a href="#"><span>Home</span></a></li>
          <li><a href="#"><span>About</span></a></li>
          <li><a href="#"><span>Our Work</span></a></li>
          <li><a href="#"><span>Products</span></a></li>
          <li class="last"><a href="#"><span>Contact Us</span></a></li>
     </ul>
 </div>

As you can see we have a standard unordered list which is then styled with CSS to look like tabs. By giving each tab a class which describes it’s logical section of the site, if we were to then apply a class to the body tag of each page showing the same, we could write a clever CSS selector to highlight the correct tab on any given page.

Sound complicated? Well, it’s not a trivial concept, but actually applying it is dead simple.

Modifying the markup

First thing is to place a class name on each li in the list:

<div id="navigation">
     <ul>
          <li class="home"><a href="#"><span>Home</span></a></li>
          <li class="about"><a href="#"><span>About</span></a></li>
          <li class="work"><a href="#"><span>Our Work</span></a></li>
          <li class="products"><a href="#"><span>Products</span></a></li>
          <li class="last contact"><a href="#"><span>Contact Us</span></a></li>
     </ul>
 </div>

Then, on each page of your site, apply the a matching class to the body tag to indicate which section of the site that page is in. For example, on your About page:

<body class="about">...</body>

Writing the CSS selector

You can now write a single CSS rule to match the selected tab on any given page. The logic is that you want to match the ‘about’ tab on the ‘about’ page and the ‘products’ tab on the ‘products’ page, so the selector looks like this:

body.home #navigation li.home,
 body.about #navigation li.about,
 body.work #navigation li.work,
 body.products #navigation li.products,
 body.contact #navigation li.contact{
      ... whatever styles you need to show the tab selected ...
 }

So all you need to do when you create a new page in your site is to apply a class to the body tag to say which section it’s in. The CSS will do the rest for you – without any server-side help.

About the author

Drew McLellan is lead developer on your favourite small CMS, Perch. He is Director and Senior Developer at UK-based web development agency edgeofmyseat.com, and formerly Group Lead at the Web Standards Project. When not publishing 24 ways, Drew keeps a personal site covering web development issues and themes, takes photos and tweets a lot.

More articles by Drew

Comments