CSS: Current Page highlighting on the menu

Discussion in 'Web Design and Development' started by phadam, Feb 8, 2011.

  1. phadam macrumors regular

    Joined:
    Jan 21, 2009
    #1
    Trying to edit some css on my site so that the current page on my navigation/menu stays highlighted indicating the current page. Right now I have for my css menu links:

    a:link {
    text-decoration:none;
    color:#000000;
    }
    a:active {
    text-decoration:none;
    color:#FFF;
    background-color:21B9FF;
    }
    a:visited {
    text-decoration:none;
    color:#000000;
    }
    a:hover {
    text-decoration:none;
    color:#FFF;
    background-color:#21B9FF;
    }


    Would that complete my css section or am I missing something?? What about what I would need for my html?
    Any help would be appreciated.

    Thanks
     
  2. Darth.Titan macrumors 68030

    Darth.Titan

    Joined:
    Oct 31, 2007
    Location:
    Austin, TX
    #2
    Nope. You'll have to use a server-side scripting language to add a class to the link for the current page, or manually add it to the appropriate link in the HTML on each page.

    a:active doesn't do what you think it does. It only comes into play as the link is clicked.
    PHP:
    {
    text-decoration:none;
    color:#000000;
    }
    a:hovera.current {     // <- This will give your :hover pseudo class
    color:#FFF;             //     and .current class the same appearance
    background-color:#21B9FF;
    }

    <
    class="current" href="thispage.html">Current Page</a>
    <
    a href="otherpage.html">Another Page</a>
     
  3. angelwatt Moderator emeritus

    angelwatt

    Joined:
    Aug 16, 2005
    Location:
    USA
    #3
    If server side programming isn't an option for you, another option is to add a unique id to all your pages (<body id="homepage">) then use that in your CSS to style it differently. I prefer the server-side approach myself, but I'm a developer.

    PHP:
    #homepage a, #otherpage a { }
     
  4. mwilloam macrumors newbie

    Joined:
    Apr 3, 2010
    #4
    Edit: I didn't read the replies before writing this. Exactly what they said above. I am also not a developer so I like pure CSS and avoid scripting.

    This is wat I do. Give the current page's relative list item a specific class called "current" or whatever and then style that class accordingly. see:

    <ul>
    <li class="current">Page 1</li>
    <li><a href="http://www.page2.html">Page 2</a></li>
    <li><a href="http://www.page3.html">Page 3</a></li>
    <li><a href="http://www.page4.html">Page 4</a></li>
    <li><a href="http://www.page5.html">Page 5</a></li>
    <li><a href="http://www.page6.html">Page 6</a></li>
    </ul>
     
  5. phadam thread starter macrumors regular

    Joined:
    Jan 21, 2009

Share This Page