Yesterday, I reworked the index on my site - http://sfl.london.on.ca - so
that they used list markup and I'm quite pleased with them. However, I'm
having a problem with one small aspect of the menu and could use some help
in fixing it.
The problem is that I want the index to always highlight the link for the
content which is currently being displayed on the right hand side of the
page. This behaviour should be over and above the rollovers on the links and
it should work in the three major browsers, IE, Firefox, and Opera.
So, for example, if someone moves their mouse over the "Club Policies" link
in the index, the link should be highlighted as a rollover and if they click
on that link, the browser should show the Club Policies page on the right
AND highlight that link in the index. Naturally, the link should appear
differently than it does for a regular rollover. The highlighting for the
currently-selected page should persist until someone clicks on a new page.
I've got this working fine in IE6 but it doesn't work in Firefox and Opera.
Does anyone know how I could make this work in Firefox and Opera as well?
The basic technique I am using is to have an id for each link in the menu,
like this:
<a href="policies.shtml" id="policies">Policies</a>
Then, have this in the Policies page:
<style type="text/css">#policies {background: #FF9933}</style>
Can this technique be tweaked so it works in all three browsers? Or will I
have to change it dramatically? Or will this technique simply not work for
all of the three browsers no matter what I do?
By the way, if anyone can think of a technique that doesn't involve putting
any CSS in the HTML markup of the individual pages, I'd love to hear it. The
current technique uses only one line of internal CSS in each HTML page but
I'd prefer none at all....
--
Rhino