Current open navigation!


I want to ask if there is a way in CSS to indicate the link which the user is in its page currently!, for example look at top of sitepoint forums you will find that the link ‘forums’ appears in white color at the moment. :slight_smile:

Similar to what Ralph said , I class the body of each page. for example home page would be <body class=“home”>, the about page <body class=“about”> this is simple to do even if you are using a CMS. Then I class every LI ( or anchor) on the Navigation. I can the n have a “double rule”

.home .home, .about .about{active styles rule go here}

incidentally you could apply this to anything not just menus… for example you could add a class to your side bar so taht the home sidebar has a different style than the page sidebar… possibilities are endelss

There was a recent poll thread about using active as a class name.

It is not a good idea since it is prone to cause confusion with newbs in regards to the pseudo class :active

For current page highlighting I always advise using .current as the class name.

I agree ralph, page specific css can be much cleaner on the html by just setting a class on the body. Then styling the css as you have shown.

The only advantage I see to the .current classes is that it keeps things very simple for a small site where the nav links will rarely or never change.

Yes, add a class name to the “current” link, the SP one uses a class called class=“active”

with css alone, no. css only takes off from where html left it:

[FONT=“Courier New”]html code:

<a accesskey=“6” id=“tabc” class=“active” href=“/forums/” title=“Our friendly, vibrant and well-informed community”>Forums</a>[/FONT]

[FONT=“Lucida Sans Unicode”]css code:

ul#navlist li {
color: white;
font-weight: bold;

My preferred way to do this is for each page to have a class on the body tag. For example, the Contact page would have a class on the <body> tag such as class=“contact”.

<body class=“contact”>

So in my style sheet I would then have styles for the links in their normal state…

#menu li a {…}

… and special styles (with higher specificity) for the current links:

.contact #menu li a {…}

That way you can serve up the same menu on all pages (and feed it in with an include etc.) rather than having a different menu on each page, littered with .current styles).