Skip to content

24 ways to impress your friends

Auto-Selecting Navigation

Drew McLellan Drew McLellan

35 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.

setmajer

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

sumguy

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.

Petit

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!

Dustin Diaz

It would be neat for non-css browsers to have an indicator of the current page…

I figured since we have the span tags for all of them, it would be cool instead to place a strong element to indicate the current page.

...Anyway, for what it’s worth. It’s at least another viable solution.

Wow, this is genius! This makes even the server-side-scripting easier. (btw, this textarea’s tabindex is 1, shouldn’t it be 5?)

wrtlprnft

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.

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)

Drew McLellan

Chris – fair point. Perhaps an ID would be more appropriate on the body tag. 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 body as 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 a body tag like so:

<body id="map-and-directions" class="contact">...</body>

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.

taare

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

Lach

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.

Simon Plenderleith

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!

Mats Lindblad

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

Jules

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.

Drew McLellan

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.

John Labriola

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.

Small Paul

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.

Robert Wetzlmayr

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:

  • Justin French’s article on Stylesheet Sanity
  • Jon Hicks personal site

    /* Highlight the section you're in and on rollover: */ #about #n-about, [...]

    p.

Kim Siever

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.

Velan

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

some1else

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 strong instead of a to 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 :-)

Velan

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

Kevin Cannon

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!

Chris

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

SJR

Could be me, but isn’t that the same technique described in ala in oct 03?

http://www.alistapart.com/articles/slidingdoors2/

Mike

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.

Impress us

Be friendly / use Textile