One question though.

When I set the css to highlight the current menu, it works just fine. But when I have a drop-down menu, the css hightlights the entire drop down menu (meaning every item so the entire menu is that highlighted color.

I only want the menu to be highlighted and not the entire block. Can I ask for your help? Thanks in advance!

body.section1 #nav li:nth-child(1), body.section2 #nav li:nth-child(2),… {background:#ffffcc;}

There should be no problem in having a third type of image for the current page as you would just adjust the code accordingly.

e.g. roughly:

#nav li.one a {
background:yellow;/* normal*/
}
#nav li.one a:hover {
background:blue;/* hover*/
}
body.section1 #nav li.one a,
body.section1 #nav li.one a:hover{
background:red;/* current*/
}

If you don’t want the current nav clickable and you don’t want to change the link to a span on the current page then you could use the technique from this example instead.

http://www.pmob.co.uk/temp2/page1.htm

A span is absolutely placed over the link (when it is current) so that you can’t click it. When it is not current the span does nothing.

It’s too hard to provide support through a blog post so if you want detailed help then post in the Sitepount CSS forums (http://www.sitepoint.com/forums/forumdisplay.php?s=&daysprune=&f=53) where its easier to post code, links and attachments.

Your solution to the active link css seems to be just the thing I need, but I am having trouble customising it to work with my nav menu.

1. I’m creating a Dreamweaver template with the nav menu set up in it;

2. In the css file I’ve got each of the menuitems each with a background image: #menutop li.buttonHome a{background-image…..}

3. there is also a hover with a different background image: #menutop li.buttonHome a:hover {background-image….}

4. This all works so far just fine. In the Template I’ve specified editable attributes for:
- the class of each a href on the menu buttons

- and the class of the body tag.

What I would like to do is set the menu up so that on the currently viewed page, a third background image, namely the one with a different colour, etc. displays instead of the default link image.

How can I do this with the code you have provided here? I’ve tried changing the body class and menu button class via the “Modify Template Properties” in Dreamweaver but it’s not working…

Along with this, I would like to have the active link class override the a:hover function, as well as disable the a href of the button corresponding to the currently viewed page.

Can you help? This would all be simple enough I think, if I wasn’t trying to get it all into the one template. I’m just trying to avoid having to make changes to the nav menu on every single page of my site…

Thanks!

I copied the code above, swapped out my variables, but it didn’t work.

Instead of class’ I am using ID’s.

That’s it. Should work, right? What’s up?

It depends on what you mean by image swap. If you are using javascript then css can’t affect that but if you are simply swapping the nav menu items on hover then you should be able to target those in the same way as the background is changing.

If you meant something more complicated I’d need to see the page and check first

If you want to change the text color instead of the background color thewn just change the rule fr each.

body.section1 #nav li.one {color:red}
body.section2 #nav li.two {color:blue}

etc…

If on the other hand you meant you wanted to change the text on the whole page then you would need to address the elements that are giving the colour to the page.

If you have just set the color on the body element then you can just set up classes to change it for each page as required.

Just add a different class to the body tag on each page and then address the style using that class.

e.g.

body.page1 {color:red}
body.page2 {color:blue}

etc….

Then in each page make sure you have added the correct class to the opening body tag as required.

If on the other hand you have specifically added colours to different elements then you will need to target those elements via the body class.

e.g.

body.pag1 h1 {color:red}
etc…

Hope that covers what you wanted.

really impressed with all your work, helping the CSS noobs!

I’m trying to integrate this into a website I’m currently working on, but am a little confused as to where I add the

” body.section1 #nav li.one {background:#ffffcc;} ”

I plan to use your CSS code to change the colour of the text on the page you are on. So i’m guessing instead of:

{background:#ffffcc;}

I would have something like:

{color:#630;}

would really appreciate your help.

thanks,

Rory

Thanks a lot.

http://www.alistapart.com/articles/keepingcurrent/

If you are using PHP anyway then there are quite a number of php routines about that could grab the current url and adjust the class accordingly.

In my example you could add the class to the html element instead although it’s not really allowed by the specs but is unlikely to do harm.