View Full Version : CSS Navigation Active States

Feb 23rd, 2012, 02:18 AM
What is the best way to set an active states in a navigation menu? I've been doing this a certain way for a while now, but it seems there are several possibilities.

I'm curious as to what is the simplest, most effective way?

Do most people just give the element a special div depending what page they are on? Or do they actually use :active?

Thanks for any help!

Feb 23rd, 2012, 02:45 AM
I find the using body id's for declaring the active state is the best practice for me especially when you have your navigation in a php include file.

Not sure if thats the best way but i find it the best for me. Hope this helps.

Feb 23rd, 2012, 02:50 AM
Trav, know any good tutorials regarding body ids?

Feb 23rd, 2012, 02:57 AM
:active means that eirhter the mouse cursor is over the element with a mouse button depressed or the field has the focus and the enter key is depressed. It will therefore not do what you want in styling the current page link differently from the others.

Feb 23rd, 2012, 03:20 AM
Hello stevenmw,
Not sure it's a good one but I do have a demo at http://nopeople.com/CSS%20tips/h_ul_menu-with_images/index.html

Feb 23rd, 2012, 08:13 PM
Here is an example

<ul id="navigation">
<li<?php if ($thisPage=="Page_home") echo " id=\"currentpage\""; ?>><a class="home" href="#"></a></li>
<li<?php if ($thisPage=="Page_work") echo " id=\"currentpage\""; ?>><a class="work" href="#"></a></li>
<li><a class="blank" href="#"></a></li>
<li<?php if ($thisPage=="Page_services") echo " id=\"currentpage\""; ?>><a class="services" href="#"></a></li>
<li<?php if ($thisPage=="Page_blog") echo " id=\"currentpage\""; ?>><a class="blog" href="#"></a></li>


#Page_home #navigation .home{..css different styling...)

Feb 23rd, 2012, 08:14 PM
Oh yeah, make sure you have the body id:) ive done that and couldnt get it to work and just forgot to define the body id.

Hope this helps