External navigation bar

1

I saw this incredible tip about creating an external navigation bar saving a file as .inc and then pasting a php code on the main file to call it.
this works great but I have a problem.
my website, has many many pages and when you click on a link, that button should change (background color, a bullet on the side, something) to show the visitor that you are on that particular page.

Any idea??

2

I do this with javascript,

there is a clever (albeit long, and drawn out, code heavy) CSS method to accomplish the same thing, but the javascript way I use is on point

Requires CSS knowledge!

  1. Paste this into your header, or include it as an external javascript file

function activate(id) {
	var tab = document.getElementById(id);
	if (!tab) {
		return;
	}
	tab.className = "activeState";
}
  1. Now you have to call this function on EVERY page you want an "active state"
    So, paste this before your ending tag:

<script type="text/javascript">
onLoad=activate('xxxxxx');
</script>

  1. So basically we’ve used JS to say "When the page loads, call the function activate()"
    and that function then applies the class “activeState” to whatever element is passed to it through the function (the element being passed is what i’ve x’d out in the function, you’ll have to fill this in with real IDs for each navigation button)

  2. SO yea, now, give every navigation link, an ID, like so:


<a href="home.html" id="nav_home">Home</a>
  1. Once you’ve done that, you need to actually write the CSS class “activeState”

so something like:


#myContainerNavDivID .activeState {
color: #ff0000;
background: url(images/myActiveStateBG.jpg);
}

Then its just a matter of filling in all the IDs you wrote in your navigation, into the javascript function call, make sure everything is correct!

3

And yea, you could probably accomplish the same thing using

<body onLoad … >

but I prefer to keep my javascript and HTML separate