Hi Ruben,
Active links are only active when "activated" ;) This means when the link is clicked / when the user presses down a mouse button on the link.
Once the link has been clicked, the link defaults to a normal link again (to be exact, to a visited link).
To make a link appear selected, you'll need to do so work yourself. A common practice is to call some JavaScript in the load method of the body that dynamically changes the Css class of the link that applies to the current page.
Another way to do this is to use some Css that override the Css class for a specific link on each page.
Something like this:
Code:
<a href="home.asp" id="home">Home</a>
<a href="clients.asp" id="clients">Home</a>
Then on clients.asp, add the following Css to the <head> section:
Code:
<style type="text/css">
#clients
{
text-decoration: underline;
}
</script>
and this to home.asp:
Code:
<style type="text/css">
#home
{
text-decoration: underline;
}
</script>
If you're using a server side language like ASP, you can have this code generated automatically for you, based on the file name.
However, since you're using frames, this probably won't work for you (unless you do yourself a big favor and drop frames altogether ;))
This means you probably need JavaScript to fix this puzzle.
Some thing like this:
1. Helper function in an external JavaScript file:
Code:
function SetSelectedMenu(idOfMenuItem)
{
if (document.getElementById)
{
document.getElementById(idOfMenuItem).className "selectedLink";
}
}
2. Next, in your onload of each page call this helper function in your navigation frame:
Code:
<body onload="parent.frames['NavFrame'].SetSelectedMenu('clients');">
3. Repeat step two for the home page, but replace clients with home.
4. Next, define behavior for the selectedLink selector in your Css file:
Code:
.selectedLink
{
text-decoration: underline;
}
5. Finally, make sure your links in your navigation menu have unique IDs:
Code:
<a href="home.asp" id="home">Home</a>
<a href="clients.asp" id="clients">Home</a>
Now, when the content frame loads, it calls the SetSelectedMenu function in the upper frame, and it passes the id of the link you want to select (clients and home, respectively, depending on the page that calls it). This method retrieves a reference to this link using getElementById and then dynamically changes its className that you have defined in your external styles sheet.
Easy, wasn't it ;)
But seriously, this is quite some work. On a frameless page, this is much easier to implement.
I haven't really tested this code (just typed it directly in this post), but I hope you get the general idea.
Does this help?
Imar
---------------------------------------
Imar Spaanjaars
Everyone is unique, except for me.
While typing this post, I was listening to:
Another Night In by
Tindersticks (Track 1 from the album:
Curtains)
What's This?
Active links format doesn't work??
