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.
Comments
Comments are ordered by helpfulness, as indicated by you. Help us pick out the gems and discourage asshattery by voting on notable comments.
Got something to add? You can leave a comment below.
10/12/2005
Wow, this is genius! This makes even the server-side-scripting easier. (btw, this textarea’s tabindex is 1, shouldn’t it be 5?)
Vote Helpful or Unhelpful
10/12/2005
Neat idea!
I think the tabindex 1 for the textarea is a good idea because the commment is the thing you have in your head and want to write down, so you want to do that first and then fill in your name and stuff like that.
Vote Helpful or Unhelpful
10/12/2005
It would be neat for non-css browsers to have an indicator of the current page…
I figured since we have the
spantags for all of them, it would be cool instead to place astrongelement to indicate the current page....Anyway, for what it’s worth. It’s at least another viable solution.
Vote Helpful or Unhelpful
10/12/2005
wrtlprnft:
You are correct :)
(I just was annoyed by the way it juped from the http://-field to the logo when I wanted to enter a message)
Vote Helpful or Unhelpful
10/12/2005
The one comment I’d have is: why a class, not an ID? Each of those links would be unique on the page, no?
Of course, if one wanted to get really wonky (in ‘modern’ browsers anyway) one could use an attribute selector to pick out the correct link, and then to style any other links to that same page (e.g. in breadcrumbs).
Vote Helpful or Unhelpful
10/12/2005
Chris – fair point. Perhaps an ID would be more appropriate on the
bodytag. However, for the links themselves, it’s conceivable that you could have more than one representation of the selected site section on a page, so a class works for me.When looking at it from a site-wide point of view, however, it’s often more practical to have a class on the
bodyas each individual page within that site section may have an ID of its own. For example, your Map and Directions page with the Contact section might have abodytag like so:This would enable you to write specific CSS rules for the layout of that page without having to throw in extra divs and what have you.
So conceptually from a site-wide perspective, you are classifying the page more than you are uniquely identifying it – at least for this purpose.
Vote Helpful or Unhelpful
10/12/2005
HOLY CRAP. I was JUST writing up my method of doing this. Not fair, not fair at all.
Vote Helpful or Unhelpful
10/12/2005
Wow! This is odd! Noone doing serious web-development would do it this way!
Vote Helpful or Unhelpful
10/12/2005
Jose, what are you talking about? This is a perfect method as it allows for so much more than just using “active” on the current link.
Vote Helpful or Unhelpful
10/12/2005
Could be me, but isn’t that the same technique described in ala in oct 03?
http://www.alistapart.com/articles/slidingdoors2/
Vote Helpful or Unhelpful
10/12/2005
This was a really clever way to do it, though it requires more css than the classical .active, or .select method if you will, since you would have to add a rule for each link, while a .active rule would be universal for all elements with an active class applied. But then again, this method adds flexibility by letting you modify everything on a page by prefexing your rules with body.[active class name here]... But I would say method costs more than it tastes, in most cases
Vote Helpful or Unhelpful
10/12/2005
SJR – yes, looks like this is pretty much the same as the technique described by Doug in that ALA article.
Hope that helps.
Vote Helpful or Unhelpful
11/12/2005
Very brilliant technique. I quite enjoyed reading this article (and the others on this site as well.)
Vote Helpful or Unhelpful
12/12/2005
I’m not sure this is the best way to handle it. If you have to, then I guess you have to. But if you’re really on the same page, it’s better to remove the link entirely, so people won’t click on a link to take them exactly where they are.
That’s not to say you can’t use this technique for other interesting uses such as slightly different styling for all the sections of your site, etc.
P.S. When I hit tab after entering my site’s url, it takes me up to the page’s giant 24 ways heading. It’s a little annoying.
Vote Helpful or Unhelpful
12/12/2005
Nice little article Drew! :) We’re already using this technique on a site we’re currently developing for a client and it works great.
Keep up with the great articles, it’s making the run up to Christmas a damn sight more interesting than usual!
Vote Helpful or Unhelpful
12/12/2005
I’ve used a similar technique on www.su.se as well but i used IDs instead, but you are right about it being better to use classes if there is more than one link of the type on the page.
The tabindex is a well known TextPattern issue. It’s a bit cumbersome to fix.
Nice article though, some things can’t be said often enough. ;)
Vote Helpful or Unhelpful
12/12/2005
I was going to make the same comment about classes for the links and while the second block of code with classes in only the navigation bar could be replaced with IDs, in the third code block, I recognize that class is better. However, class=”last” might be moved to an id.
I generally use PHP to remove the link to the current page so even though CSS may be used to make the current page link different, in my work, the link does not exist and id=”selected” is applied to the li.
Vote Helpful or Unhelpful
12/12/2005
I firmly believe it’s a rotten idea to remove the link to the current section. Two reasons:-
Firstly, if the user has clicked on that link already, they’ve learned that it’s a link. If they go back there again – under whatever context – and it’s still there but now isn’t a link, that’s just going to be confusing and frustrating.
Secondly, there are lots of occasions whereby the user may want to navigate back up to the top of the section they’re currently in. Regardless of any other ways there may be to do this from within the page structure, the method they already know and are familiar with is that main navigation link that they followed in the first place. See point 1.
Sure, go ahead and style the current section differently – this is an important visual aid to help the user understand where they are in the site – but don’t remove the link, it serves zero benefit to do so.
Vote Helpful or Unhelpful
12/12/2005
Wonderfully simple! I can not believe some hasn’t discussed this earlier. I use PHP to write in the “current” status. But there are occasions where a client has just a plain ol’ HTML site… Nice, THANKS!
And I agree, links should stay.
Vote Helpful or Unhelpful
12/12/2005
Thank you. This is one of the best Christmas gifts ever for a new CSS convert or wanna-be :-)
Cheers!
Vote Helpful or Unhelpful
13/12/2005
I’m with Dustin: strong and em tags are good for showing the user where in the navigation they are when CSS isn’t present.
I’m half with Lach and half with Drew. I agree that, within a multi-page section of a website, that section’s navigation link should be present so that the user can get back to that section’s home page.
However, having a link on a page to the page you’re on is a bit redundant (as it doesn’t take the user anywhere), and can be confusing: if the user clicks on it, they may see the page reload, and thus might think they’ve gone somewhere else, even though they haven’t. This is (dareI speak his name?) Jakob’s position: http://www.useit.com/alertbox/20031110.html (see guideline 10).
I haven’t done any user observation on this particular point, so I’m not sure. My gut tells me to avoid links to the current page where possible.
Vote Helpful or Unhelpful
13/12/2005
I really like the simplicity of this method. But, sorry folks for spoiling the party, this has been discussed many times before. Nevertheless, the method deserves exposure.
Occurences of prior art:
/* Highlight the section you're in and on rollover: */ #about #n-about, [...]p.
Vote Helpful or Unhelpful
13/12/2005
Robert – sorry, I missed the bit where I claimed it was original thought.
Vote Helpful or Unhelpful
13/12/2005
Drew
tabindex.
Cough! Cough!
(see previous comments above)
;-)
Vote Helpful or Unhelpful
13/12/2005
Tabindex fixed. Oh yeah, baby.
Vote Helpful or Unhelpful
13/12/2005
Another option, in case you don’t want to add classes to your links, is to use JavaScript to determine the URL and then add a “selected” class to the corresponding link.
This is especially useful if you have a website where the menu appears by SSI on several hundred (or thousand) pages.
Vote Helpful or Unhelpful
13/12/2005
Can you have a link with an working example? I’m new to all this CSS. It would be very helpful if you had a page with a working example.
Thanks
Velan
Vote Helpful or Unhelpful
14/12/2005
Well, in my opinion as well, the active page in the navigation should not be represented by an anchor, but by another HTML element that degrades to something logical. If the user agent does not support CSS, the navigation remains simply a set of links, giving no clue to where the reader is in the page architecture (unless breadcrums or a rootline are provided).
Usually, I would use
stronginstead ofato represent the current link in a navigation list. That way in a text-based browser, the user easilly distingueshes which list element he is currently visiting.The usability aspects of this technique could possibly outweight the mentioned “frustration and confusion”. It might even be pointed out, that the user can distinguish between visual styles of different types of navigation items (currently viewed vs. the rest). That means that he/she can also benefit from knowing not to click on the currently visited list item. Check the example here.
Of course, HTML is way too flexible for us all to agree on what exactly is semantically correct and what not.. I believe the technique presented is perfectly legitimate (and quite ingenious), but I’m adding my opinion to the bunch as well, just to add some extra supporting arguments :-)
Vote Helpful or Unhelpful
14/12/2005
just the issue i have been looking to solve.thank you. i will definatly institute this in the site im working on. @the javascript comment i personaly prefer not to use client side scripting just cause it can get messy and the site im working on has to be extremly accessable, as in i set a evel 3 in tidy and i pretty much refuse to use javascript anywhere but the members area where its not as important.
Vote Helpful or Unhelpful
15/12/2005
Good article and fine current tab solution.
If you can do it with CSS,don’t do it with javascript.
Browsers supporting this CSS behavior are working direct on the DOM, with built in logic.
For less standards compliant browsers, the graceful fallback is always links ( text or image )
Bowing to thee for the explanation!
Vote Helpful or Unhelpful
15/12/2005
Drew wrote in his article “You can now write a single CSS rule to match the selected tab on any given page…”
Drew, can you provide me with a link/site that talks about CSS Rules and Matching?
It’s greatly appreciated…
Velan
Vote Helpful or Unhelpful
19/12/2005
Hey,
This is a great technique, but it has limitations, and is a hassle when using templates.
I wrote a small ubobtrusive Javascript snippet awhile ago called Highlight Current Link which applies a class to any link which links to the current page.
It’s available here in case it’s of any use to anyone:
http://www.multiblah.com/tools/
Loving these 24 tips BTW! Great Idea!
Vote Helpful or Unhelpful
21/12/2005
What about using css attribute selectors? This isn’t supported in IE yet, but it is in Firefox (1.0.7)
#navigation ul li a[href*="about.htm"] {/* styles */}An example of this technique can be seen here: http://icant.co.uk/csstablegallery/index.php?css=28 (scroll down the table, and you will see one of the links text has been replaced with an image)
Vote Helpful or Unhelpful
23/12/2005
To those saying that a strong or emphasis should be used, I might ask how that’s semantically correct? You’re going for a visual effect, correct? You’re not trying to give it emphasis or strong emphasis as far as I can tell.
While it’s important to recognize non-css compliant browers, you shouldn’t use non-semantic mark-up as it implies poor meaning to anything that relies on that mark-up, such as a screen reader, to determine what the content within is. I can see no reason why you would want to add any emphasis to a link of which you are currently at. That should be implied or delivered by the content within a header tag at the appropriate level.
Vote Helpful or Unhelpful
01/01/2006
Hi, I am a budding web developer, and I love reading little css tricks to make life easier.
This is the best I have read so far, pretty damn cunning!
Good job
Vote Helpful or Unhelpful
Impress us