Automatically highlight current page in menu via Javascript
Whenever one builds a website, one issue is always guaranteed time consuming: highlighting the current page or section in the website with a different style.
In theory, this is relatively simple, just add a .current class to the link in question.
So, if you have a menu styled from a list, you'd have:
HTML:
<ul> | |
<li><a href="#">Link 1</a></li> | |
<li><a href="#" class=".current">Link 2</a></li> | |
<li><a href="#">Link 3</a></li> | |
<li><a href="#">Link 4</a></li> | |
</ul> |
The limitation of this method becomes obvious if you have a site with more than 5-7 pages; each page needs to have its own menu, which makes updates difficult, especially if you prefer to keep the menu in a template.
I've seen several solutions to this problem, but I didn't really like any of them - so I propose something more clever.
Follow up:
A pure CSS solution
One possibility, used by A List Apart would be to assign an id to each link, so that the links above become:
HTML:
<ul> | |
<li><a id="link1" href="#">Link 1</a></li> | |
<li><a id="link2" href="#" class=".current">Link 2</a></li> | |
<li><a id="link3" href="#">Link 3</a></li> | |
<li><a id="link4" href="#">Link 4</a></li> | |
</ul> |
Then, you'd have to set the class property for each <body> tag, i.e. <body class="link1">. In the stylesheet definition, you'd write
CSS:
.link1 a#link1, | |
.link2 a#link2 | |
{ | |
background-color: #EEEEEE; | |
| |
} |
If you're relatively new to CSS, the above definition means that any link with id set to link1 that is a descendent of a tag (<body>) with the class .link1 will be "highlighted".
This method is an improvement in that the menu can be written only once; however, you still have to set the class for the body tag in each page.
Generating HTML
Another solution would be to use PHP/ASPX or any other server language to generate the pages and menu items. Of course, this provides complete freedom, since you can generate the html code any way you like. Still, this method can't be used in all circumstances. Not all sites require a server technology and making a site dynamic just for this feature would be overkill.
Javascript + CSS
I'm a little surprised that I haven't seen a similar solution published anywhere, so I've thought about sharing it.
The concept is very simple: The javascript code gets the current URL. It then cycles to all links that are contained in the navigation bar (any tag with id="navbar"). If the link points to the same page (i.e. "link1.html"), the code applies a class to the link.
The code should work in all browsers that support getElementById() including IE5, Firefox & Opera. You may add compatibility for older versions of IE by using document.all in addition to document.getElementById()
Here's the code (rewritten on Oct.11.2007):
Java:
function extractPageName(hrefString) | |
{ | |
var arr = hrefString.split('/'); | |
return (arr.length<2) ? hrefString : arr[arr.length-2].toLowerCase() + arr[arr.length-1].toLowerCase(); | |
} | |
| |
function setActiveMenu(arr, crtPage) | |
{ | |
for (var i=0; i<arr.length; i++) | |
{ | |
if(extractPageName(arr[i].href) == crtPage) | |
{ | |
if (arr[i].parentNode.tagName != "DIV") | |
{ | |
arr[i].className = "current"; | |
arr[i].parentNode.className = "current"; | |
} | |
} | |
} | |
} | |
| |
function setPage() | |
{ | |
hrefString = document.location.href ? document.location.href : document.location; | |
| |
if (document.getElementById("nav")!=null) | |
setActiveMenu(document.getElementById("nav").getElementsByTagName("a"), extractPageName(hrefString)); | |
} |
The ony thing left to do is to call setPage() from the html page, just after the menu, with <script language="javascript">setPage()< /script>
You can make the script run without explicitly calling setPage() from the html body, by adding
Java:
window.onload=function() | |
{ | |
setPage(); | |
} |
in the .js file (Suggested by Alice). If you go this route, please test to make sure that it doesn't interefere with other onLoad events. Also, in this case the effect will be applied only after all page elements have been loaded.
That's all. You can download a fully working example.
Permalink29 comments
Just add window.onload=setPage; to your javascript and it should trigger automatically.
This is a brilliant tool to remote-control ssi variable menu content (for example in Contribute site menus). Allows the contributer to add any menu items using a simple list, yet they still highlight automatically - sweet!
One extra functionality would be to switch off the current link somehow - any ideas?
Also, I am looking at using this via SSI, and calling the script from a .js using
Absolutely love this code; it's saving me so much time!
I think I found a little bug though and suggest a fix here: http://bendalziel.blogspot.com/2006/07/auto-highlighting-navigation.html
I'm pretty new to JavaScript so any hints or corrections would be great. I return "x" just because I'm not sure what would be better to return...
Thanks again
Geoff, you can have the highlighter work simultaneously on different navigation menus, but only if they point to the same page, i.e. you have a top navigation with a link to stuff.html and a left-side navigation also pointing to stuff.html
In this case, in the setPage() function, duplicate the last line for the new div:
if (document.getElementById('navbar')!=null)
setActiveMenu(document.getElementById('navbar').getElementsByTagName('a').extractPageName(hrefString));
if (document.getElementById('navleft')!=null)
setActiveMenu(document.getElementById('navleft').getElementsByTagName('a').extractPageName(hrefString));
}
It can get however a little confusing, especially if you have links to documents with the same name, e.g. index.htm but placed in different folders, e.g. /work/index.htm and /home/index.htm. To cope with this, I rewrote the extractPageName() function but I want to test it more before i publish it.
function extractPageName(hrefString)
{
var arr = hrefString.split('.');
// Check to see if the url has a query string by searching for the question mark
var hasquestion=hrefString.indexOf('?');
if (hasquestion == '-1')
{
arr = arr[arr.length-2].split('/');
return arr[arr.length-1].toLowerCase();
}
else
{
return arr[arr.length-1].toLowerCase();
}
}
This will allow your links like filename.php?querystring=blabla to be highlighted as well. Well, it works for me anyway.
Cheers
You can highlight a parent's link if the menus are nested lists (like http://www.htmldog.com/articles/suckerfish/example/), but I can't give you very specific directions as I don't know your exact configuration.
Anyway suppose you have a hierarchy like
ul#menu>li>ul#submenu>li>aIf you look in the javascript code, you'll see a line
arr[i].className = 'current';.From there, you apply the 'current' class to the link itself (the
'a' tag) but you can also apply it (or some other class) to one of its ancestors.You can write
arr[i].parentNode.parentNode.parentNode.className = 'current'; to apply the 'current' class to the 'li' that is part of the 'ul#menu' list.I hope it makes sense...
http://24thwebdesign.freehostia.com/current/current.js
Have a look at the page with View Source to see how it works (I think I've also updated the javascript code since I wrote the article).
I'm trying to include the java-script and instead to call the setPage() in the page, I have this added to the js:
window.onload=function(){
setPage();
}
Thanks again! (love the captcha)
setActiveMenu(document.getElementById('navbar').getElementsByTagName('a').extractPageName(hrefString));
with:
setActiveMenu(document.getElementById('navbar').getElementsByTagName('a'),extractPageName(hrefString));
blah.com/page.htm#end), the same as query strings do. Here's a simple fix I wrote to address both in only 2 lines of code, plus slightly altering one of your existing lines of code:New code in bold
Altered code in italics
function extractPageName(hrefString)
{
var hrefString = hrefString.split('#');
var hrefString = hrefString[0].split('?');
var arr = hrefString[0].split('/');
return (arr.length<2) ? hrefString : arr[arr.length-2].toLowerCase() + arr[arr.length-1].toLowerCase();
}
Please note, "if statements" to check for "?" and "#" are unnecessary in my code, because if they do not exist, the result of the split is simply a single item array. Much easier than doing the checks and there are no errors either. Hope that's helpful for someone.
[Armand: Excellent post, Jeremy. Thanks!]
Thanks you guys so much
So if you have dynamicaly generated pages like this for example: - browse.php?c=1 - you have to modify the "extractPageName" function in highlight.js with Ahmed G's mod:
[code]
function extractPageName(hrefString)
{
var arr = hrefString.split('.');
// Check to see if the url has a query string by searching for the question mark
var hasquestion=hrefString.indexOf('?');
if (hasquestion == '-1')
{
arr = arr[arr.length-2].split('/');
return arr[arr.length-1].toLowerCase();
}
else
{
return arr[arr.length-1].toLowerCase();
}
}
[/code]
for this to work only in current page, otherwise all pages like
browse.php?c=# (where # is the number of the page) will be highlighted.
Hope this helps.
It's always a pain marking an active page, this looks a great solution.
I'm going to try it right now.
Thanks!
If I invoke the page www.mydomain.org/topic/index.html via www.mydomain.org/topic/, HREF doesn't tack on 'index.html'; it simply passes along the URL with the slash-suffixed pathname. Unfortunately, there doesn't seem to be any way to extract the explicit filename using JavaScript, at least not that I'm aware of.
My not very elegant solution is to maintain a list of objects, each of which stores the title and absolute URL of the page in question. I can then compare the titles, as I can extract document.title with ease - as long as I'm careful to name them the same in both places, which is certainly a shortcoming of this approach.
Using some sort of modified Sitemap that would be read and used to set both the stored titles and the page titles themselves would solve this problem, but suddenly this project is ballooning in size...
Only problem I'm having so far is:
I'm on a page called /about/index.aspx
So where I have "about home" - it highlights it nicely.
However, in my navigation I have a link to /contact/index.aspx
And it highlights that as well. So I have two highlighted items.
Now, it's not a major problem as I just removed the "index.aspx" out of the link to /contact.
But just thought I'd let you all know.
I have just been investigating jquery looks pretty good, I am sure it could do this more efficiently.
Could do with a load handler and an add class function rather than just changing the class to whatever.
But good work all round
: huggle :
take me some time to make the id=NAV :)
worked gr8
ty
Does anyone have a recommended solution?
Club/index_html
Sailing/index_html
and the java script doesn't separate them - and both links are highlighted when you are on one or the other. If I could make the links
Club.index_html
Sailing.index_html
It would work fine. Can you or someone suggest how the javascript should be modified to work with the forward slashes and distinguish between the links. Thanks.
If you download the code again, it should work.
Comment feed for this postLeave a comment
Aggregated by MXNA
