CSS Active Links

[johnnybravo]

Hi guys,

I want to create a menu that is going to be called from an include file.

The problem is i want the link to appear differently when you are on that page. So for example if you are on the home page the homepage button will be blue and the rest of the buttons will be grey.

Is it possible in CSS to set an active link to a different colour? (i have tried the a:active but thats just for mousedown isnt it?)

I would also like the current link to be inactive so you cant select it - is this also possible?

thanks
john

[moojoo]

Not sure how this would work with an include but.

Set an id or class for it.

#foo li#current a {} etc...

<li id="current"><a href="" title="">Foo!</a></li>

[ukgeoff]

How is your JavaScript coding? I do what you want to do on my web sites but rather than just drop the answer in your lap, so to speak, I'll give you some pointers. That way you learn more.

Give each of your links a unique id.

Create a css style to be used with the inactive link.

Use a meta tag to give each page an identifier.

Write some JavaScript that runs 'onload' which searches your navigation for a link id that fits with the page identifier. Then use JavaScript to replace the a link with a span and asign the css style for the inactive link.

[johnnybravo]

Hi Geoff, my JavaScript knowledge is ok, not very good at writing from scratch but I can modify code to get it to do what i want... usually ;-)

I have actually found some code now on a forum and modified it to suit what i wanted...ish:

Code: Select all

 
var links = new Array (
"rapport",
"flirt",
"hr"
);
 
var links_text = new Array (
"Rapport Unlimited",
"Flirt Guru",
"IBM HR campaign"
);
var links_url = new Array (
"portfolio_rapport.asp",
"portfolio_flirt.asp",
"portfolio_ibm_hr.asp"
);
var loc=String(this.location);
loc=loc.split("/");
loc=loc[loc.length-1].split(".");
loc=loc[loc.length-2];
function percentinspiration_menu_gen()
{
for(var i=0; i<links.length; i++)
{
if(((this.location=="http://www.2percentinspiration.com") || (this.location=="http://www.2percentinspiration.com/") || (this.location=="http://2percentinspiration.com") || (this.location=="http://2percentinspiration.com/")) && (i==0))
{
document.write('<a href="' + links_url[i] + '" class="leftnav">' + links_text[i] + '</a>');
}
else
{
if(loc==links[i])
{
document.write('<span class="active">' + links_text[i] + '</span>');
}
else
{
document.write('<a href="' + links_url[i] + '" class="leftnav">' + links_text[i] + '</a>');
}
}
document.write(' ');
}
} 
percentinspiration_menu_gen();

The problem now is that because i have sub-pages within my nav the links wont stay highlighted.

Here is a link so you can see what i mean

http://www.2percentinspiration.com/R...io_rapport.asp

What i want is for the nav to stay highlighted even if your on one of the sub pages (e.g -2.asp or -3.asp)

OR (Ideally)

For the content to change within the same document rather than going to different pages - but have no idea how to achieve this

Hope this makes sense?

thanks
J

[mreine]

This is beyond simple... way over thinking it here.

As been said, have a unique id for each link.

On the page itself, add a style for the specific ID of that page link to make it appear how you want. There is nothing wrong with having specific styles defined within a page.

Code: Select all

 
<ul>
 <li id="foo1"><a href="" title="">Foo1</a></li>
 <li id="foo2"><a href="" title="">Foo2</a></li>
</ul>
 
On the html page itself....
 
foo1 page
 
<style>
#foo1 a:visited { attributes }
</style>
 
foo2 page
 
<style>
#foo2 a:visited { attributes }
</style>

[moojoo]

Yeah giving each link an id would be the simplest way