Sidebar Sidebar
Become a MacRumors Supporter for $50/year with no ads, ability to filter front page stories, and private forums.

CSS: Current Page highlighting on the menu

P

phadam

macrumors regular
Original poster
Jan 21, 2009
123
0
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
 
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: 
a {
text-decoration:none;
color:#000000;
}
a:hover, a.current {     // <- This will give your :hover pseudo class
color:#FFF;             //     and .current class the same appearance
background-color:#21B9FF;
}

<a class="current" href="thispage.html">Current Page</a>
<a href="otherpage.html">Another Page</a>
 
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 { }
 
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>
 
You must log in or register to reply here.
Register on MacRumors! This sidebar will go away, and you'll see fewer ads.
Top Bottom
Back