SitePoint Sponsor

User Tag List

Results 1 to 9 of 9
  1. #1
    SitePoint Guru
    Join Date
    Feb 2007
    Posts
    731
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)

    Active Links With CSS

    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;
    }

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,367
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    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.

  3. #3
    Non-Member bronze trophy
    Join Date
    Nov 2009
    Location
    Keene, NH
    Posts
    3,760
    Mentioned
    23 Post(s)
    Tagged
    0 Thread(s)
    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.

  4. #4
    Mouse catcher silver trophy Stevie D's Avatar
    Join Date
    Mar 2006
    Location
    Yorkshire, UK
    Posts
    5,888
    Mentioned
    122 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    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.

  5. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,367
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by Stevie D View Post
    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.

  6. #6
    Non-Member bronze trophy
    Join Date
    Nov 2009
    Location
    Keene, NH
    Posts
    3,760
    Mentioned
    23 Post(s)
    Tagged
    0 Thread(s)
    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.

  7. #7
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,367
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by deathshadow60 View Post
    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.

  8. #8
    Non-Member bronze trophy
    Join Date
    Nov 2009
    Location
    Keene, NH
    Posts
    3,760
    Mentioned
    23 Post(s)
    Tagged
    0 Thread(s)
    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...

  9. #9
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,367
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by deathshadow60 View Post
    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.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •