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>
<div class="item">
<a href="contct.html">Contact information</a>
</div>
</div>
The structure should be simple and the layout should be made
using CSS only.
3. Create the CSS to display the HTML above
<style>
div.navmenu {
text-align: center;
}
div.navmenu div.item {
display: inline;
}
div.navmenu div.selected {
background-color: red;
}
</style>
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) {
Element.addClassName(items[i],"selected")
} else {
Element.removeClassName(items[i],"selected")
}
}
}
}
}
}
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.
<script>highlightMenuActivePage();</script>
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.
References:
