Highlight Menu item of Current Page

[amaher1]

Hello,

I am new to CSS. I have a menu:

Item 1 | Item 2 | Item 3 | Item 4 |

When you click on Item 1 and go to its page, lets say item1.html I would like the link to be a different color or more specifically the background color to be different.

I have found this guide:
http://www.456bereastreet.com/archive/200503/setting_the_current_menu_state_with_css/
But I did was unable to get it to work.


My html code for the items links look like:
<div class="navbar">
<a href="/emg_systems/ma-300.html" class="navbar"> EMG Systems </a> <IMG SRC="/img/bullettab.gif">
……other links…..
</div>

As in the guide I found, I tried assigning ID's to a span both before and after the a href's- neither way worked, is it because my a href’s already have a class?



Just FYI- After I figure this out, I want to make a submenu on each page. So after clicking Item 1 you get:
Item 1 | Item 2 | Item 3 | Item 4 |
section a | Section b | section c
And I want "Item 1" to stay highlighted on all the subpages...

If there a better way to do this?

Any help is great!

Thanks,
amanda

[mark87]

Add a class to the current link for each page and then change the colour for it.

ie.

<li>Link A</li>
<li class="current">Link B</li>
<li>Link C</li>
<li>Link D</li>

In CSS -

li.current { color: #HEX }

[amaher1]

Thanks.

I am not using them as a List, so Li's would not be appropriate.

I like using Li's in a menu. But the page is set to downgrade to Netscape 3, and using Li's messes up some of my other code.

I am thinking to just change my links of that page to:
<a href="kfjgkh" class="current"> It should work the same I assume.

Still would love any better ideas.

-Amanda

[mark87]

Yup doing that then should work the same way.

[ronaldb66]

The idea behind Roger Johansson's approach is that each link is uniquely identified, either by a class or by an id (which must be unique).

Through this unique identification and a specific id assigned to the body element of each of the site's pages, it's possible to define a set of style rules that work on every page to highlight the selected menu item without ever looking back.
This is especially useful when you're including the menu markup from outside the pages, for example using server side includes or server side scripting (dynamic pages).

If your site features static pages where the markup for the menu is included in every page, the approach suggested by mark87 works just fine.

Besides this all, I really wonder why you even attempt to support archaic version 3 browsers; I really doubt if anyone still uses one those, and by avoiding modern, more advanced techniques you're hurting more people then you could possibly help.