Active Links With CSS

**justlukeyou** · May 25, 2012 13:42

Hi,

I am trying to add an affect so the link of the page has its on colour but I am struggling to do this. This is the code I have, I am trying to make the link for page I am black.

a.toplinks:link {
color: #FFF;
text-decoration: none;
}
a.toplinks:visited {
color: #FFF;
text-decoration: none;
}

a.toplinks:active {color:000;}

a.toplinks:hover {
color: #3A3D38;
text-decoration: none;
}

**Paul O'B** · May 25, 2012 14:22

Hi,

I think you misunderstand what :active means

The :active state of a link is the brief moment you press the mouse down and then the link is active and will follow the href destination to a new page or section. Once the mouse is lifted there is no active state any more. The :active state isn't persistent and doesn't refer to the current page.

If you want the current page's navigation to have a different colour then you will need to add a class to the current link on each page and use that as the trigger.

e.g. a.current-page{color:#000}

The add that class to the appropriate link:

<a href="#" class="current-page">Nav</a>

Of course its usually best if the current page is not a link as that is considered bad practice (although it does make it awkward for includes) and I usually substitute a span for the anchor on the current page so that nothing happens when clicked as you don't want to reload the same page.

(BTW always declare you link states in the order of link, visited, focus, hover and active - see here for why.

**deathshadow60** · May 25, 2012 21:53

Also some legacy browsers use :active instead of :focus to indicate when you've navigated to an anchor via the keyboard -- which is why on my hover states I list all three together:

a:active,
a:focus,
a:hover {

but yeah, for the current page, add the class. There is another trick where people will put an ID on body and classes's on each of the menu items....

<body id="home">
<ul id="mainMenu"><li class="home"><a href="#">Home</a></li></ul>

#home .home,
#forums .forums,
#links .links {
// current page state
}

But I really dislike that one because of the extra markup -- it's just as easy on the back end code (assuming you are doing such -- poor man's is easy after all) to do an if statement and add class="current" to the anchor.

**Stevie D** · May 28, 2012 02:41

Originally Posted by Paul O'B

Of course its usually best if the current page is not a link as that is considered bad practice (although it does make it awkward for includes) and I usually substitute a span for the anchor on the current page so that nothing happens when clicked as you don't want to reload the same page.

The easy solution to that is to add cursor:default; into the CSS for your 'current page' style. That way, although it will still function as a link if they click on it, there's less encouragement for them to do so. Although TBH once you've styled the 'current page' link differently, not many people will try to click on it anyway.

**Paul O'B** · May 28, 2012 03:35

Originally Posted by Stevie D

The easy solution to that is to add cursor:default; into the CSS for your 'current page' style. That way, although it will still function as a link if they click on it, there's less encouragement for them to do so. Although TBH once you've styled the 'current page' link differently, not many people will try to click on it anyway.

Yes that's true, although I guess that won't help keyboard users as you'd need to turn focus off as well but of course the link will still be followed if selected.

For mouse users you could stop this happening by using :after to place an element on top to stop it being clicked.

e.g.

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>No Clickable link on current item</title>
<style type="text/css">
ul#nav {
	list-style:none;
	margin:10px;
	padding:0;
	float:left
}
ul#nav li {
	float:left;
	border:1px solid #000;
	margin-left:-1px;
	position:relative;
}
ul#nav a {
	float:left;
	width:5em;
	height:2em;
	line-height:2em;
	text-decoration:none;
	text-align:center;
	background:#ffc;
	color:#000;
}
ul#nav a:hover,
ul#nav li.current a {
	color:#fff;
	background:#f00;
}
ul#nav li.current:after {
	position:absolute;
	display:block;/* safari bug*/
	content:" ";
	left:0;
	top:0;
	right:0;
	bottom:0;
	z-index:999;
}
ul#nav li.current a { cursor:default }
</style>
</head>
<body>
<ul id="nav">
		<li class="current"><a href="page1.htm">Link 1</a></li>
		<li><a href="page2.htm">Link 2</a></li>
		<li><a href="page3.htm">Link 3</a></li>
		<li><a href="page4.htm">Link 4</a></li>
		<li><a href="page5.htm">Link 5</a></li>
		<li><a href="page6.htm">Link 6</a></li>
</ul>
</body>
</html>

(IE8+ only)

Of course keyboard users could still activate the link which is why I prefer to use a span or other element instead of an anchor.

**deathshadow60** · May 28, 2012 17:43

I don't know where you got that 'current' still being a link is bad practice, since on pages with content that updates frequently it's a lot simpler than swtiching to the keyboard for F5 or refresh, and avoids reloading every blasted element when all you want is to check for a 304 or 200.

Disabling it is bad usability -- oh noes, I can still click on it -- not that...

LAME.

**Paul O'B** · May 29, 2012 04:21

Originally Posted by deathshadow60

I don't know where you got that 'current' still being a link is bad practice, since on pages with content that updates frequently it's a lot simpler than swtiching to the keyboard for F5 or refresh, and avoids reloading every blasted element when all you want is to check for a 304 or 200.

Disabling it is bad usability -- oh noes, I can still click on it -- not that...

LAME.

It's not "lame" at all just common sense.

It makes uses feel stupid if they click a link and the same page loads but worse it leads them to doubt they were on the right page in the first place. I don't agree with a lot of what Jacob Nielsen says but he got these three points exactly right back in 2003.

If they click it, a link leading to the current page is an utter waste of users' time.
Worse, such links cause users to doubt whether they're really at the location they think they're at.
Worst of all, if users do follow these no-op links they'll be confused as to their new location, particularly if the page is scrolled back to the top.

**deathshadow60** · May 29, 2012 06:23

For any of those to be true, you have to lack visual queues, have it poorly worded... I mean if you are on the home page for example, and you click home... where would you think it would take you?

To me that's one of those noodle-doodle bits that seems to assume people are dumber than I give them credit...

Which is... shocking! Inconceivable! I very much doubt anyone is THAT stupid, and if they are, they can learn after two or three times of it doing that. OH NOES, NOT LEARNING!!!

It's another of the things that just strikes me as a pointless stupid waste of time, and one that on some sites could be outright annoying. Futaba/Wakaba type boards comes to mind... Forum indexes come to mind... "Latest Posts" comes to mind...

**Paul O'B** · May 29, 2012 06:58

Originally Posted by deathshadow60

For any of those to be true, you have to lack visual queues, have it poorly worded... I mean if you are on the home page for example, and you click home... where would you think it would take you?

Yes, a lot of sites are like that and indeed I can remember twice last week clicking to go to the home page but I was already there and it really annoys me. There's a great number of sites that don't highlight the current page link and just leave it as an underlined link ready for the unwary to click - and then feel silly for clicking it.

To me that's one of those noodle-doodle bits that seems to assume people are dumber than I give them credit...
Which is... shocking! Inconceivable! I very much doubt anyone is THAT stupid, and if they are, they can learn after two or three times of it doing that. OH NOES, NOT LEARNING!!!

Well you could put forward that argument for other facets of accessibility/usability. e.g text too small - then resize it with the browser controls. I'm afraid that argument just doesn't wash with me. Having a menu link load the same page you are on is like boarding a train to go to the station you are already on. Absolutely pointless.

User Tag List

Thread: Active Links With CSS

Thread Tools

Display

Active Links With CSS

Bookmarks

Bookmarks

Posting Permissions