"just edit it..."

Sample: How to create navigation menu highlight

2006-01-31 - Sami Ekblad

Do you have web pages that have a menu implemented as a list of links? Ever needed a highlight mechanism that you could easily plug into your site menu?

For static pages (like with Page Manager) this means that each menu should be a slightly different for all pages. Very inconvenient. No way. You want someting easier...

For this purpose I created a simple Javascript solution. The recipe is:

1 x HTML page to place the navigation menu
3 x CSS class declarations
1 x Javascript function for highlighting
1 x prototype.js (you can live with out this, but I like it and use it here)

Follow these instructions:

(NOTE: For simplicity I here do it in place. In real life you would propably want to place the CSS and Javascript into separate files.)

1. Download the latest prototype.js here and inlude it


2. Create the navigational menu HTML.

The following structure should be used to make the the CSS and javascript to work:
	<div id="navigation-menu" class="navmenu">
		<div class="item">
			<a href="index.html">Homepage</a>
		<div class="item">
			<a href="contct.html">Contact information</a>
The structure should be simple and the layout should be made using CSS only.

3. Create the CSS to display the HTML above

	div.navmenu {
		text-align: center;		

	div.navmenu div.item {
		display: inline;

	div.navmenu div.selected {
		background-color: red;
As you can see this is very minimalistic to emphasize the idea behind it.

4. Create a highlight function. (Or simply copy the function below)

	/** Highlights the currently selected page in menu */
	function highlightMenuActivePage() {
	    // Parse the document out of current windo href
	    var currentHref = window.location.href;
	    var lastDirSeparator = currentHref.lastIndexOf("/");
	    if (lastDirSeparator  >=0 && lastDirSeparator < currentHref.length) {
	        currentHref = currentHref.substring(lastDirSeparator+1);
	        if (currentHref == "") {
	            currentHref= "index.html";
	    // Iterate through the menu and highlight the one(s) that points to
	    // the current page.
	    var menu = document.getElementById("navigation-menu");
	    if (menu) {
	        if (menu.nodeName.indexOf("SITE:") == 0 || menu.nodeName.indexOf("site:") == 0) {
	            menu = menu.parentNode;

		// Find all divs with class name "item"
	        var items = menu.getElementsByTagName("div");
	        for (var i=0;i=0) {

			// Find all links in the "item" divs
	                var links = items[i].getElementsByTagName("a");
	                for (var j=0;j=0) {
	                    } else {
Note the element with id "navigation-menu" that is iterated through.

5. Dont forget to invoke the highlight function in page load.

Use this inline javascript right after the menu HTML.
Or body.onload event <body onload="highlightMenuActivePage();"> Now you can simply create new pages by copying this page. No modifications to the menu structure is needed. This is great for Page Manager as now users (content editing people) can seamlesly add new pages to site and include them into the navigation menu.