Comments on: Automatically highlight current page in menu via Javascript

By: Juan

Juan — Tue, 09 Feb 2010 13:07:23 +0000

With regards to the question of whether I can highlight two different links on the same page, for example, if I have a main navigation call “about us” and a left navigation call “vision and mission”, how do I get both “about us” and “vision and mission” highlighted. Take it that “aboutus.html” and “visionandmission.html” are in the same folder? Thanks.

By: Juan

Juan — Mon, 01 Feb 2010 15:11:48 +0000

Thanks much for your code!

By: Chris Wheeler

Chris Wheeler — Sun, 31 Jan 2010 09:52:09 +0000

Thanks very much for this. A great piece of code. I may modify it slightly for my use, but nevertheless it was a great help.

By: website development

website development — Thu, 14 Jan 2010 13:01:04 +0000

I am building a new website for commensus.co.uk and was looking for a similar solution. thanks a lot for this tutorial the CSS+Javascript solution rocks

By: Armand Niculescu

Armand Niculescu — Tue, 22 Dec 2009 06:21:54 +0000

Tim,if you have a nested menu structure and want to highlight parent elements as well as children, eg:




Item 1


Item 2



Item 2.1


Item 2.2


Item 2.3






Item 3

then, at line 16, you need to add


arr[i].parentNode.parentNode.className = "current";
arr[i].parentNode.parentNode.parentNode.className = "current";

arr[i] is the link itself (....) arr[i].parentNode is the LI tag that contains the link arr[i].parentNode.parentNode is the submenu (UL tag) arr[i].parentNode.parentNode.parentNode is the parent element (LI)I hope it's not too confusing....If you are serious about web development, I recommend you use the Firebug plugin for Firefox. It will show you exactly how properties are applied.

By: Tim

Tim — Mon, 21 Dec 2009 19:50:06 +0000

How do you get the parent li to highlight instead of the children li’s in a list…here’s what I have
http://www.capellnet.com/SITETEMPLATE

By: Tim

Tim — Mon, 21 Dec 2009 18:41:25 +0000

First of all…THANKS a bunch, this is exactly what I’ve been looking for.
I’m sure I’m missing something on this. But I’m not able to figure out how to get the parent LI to highlight even if it’s a child of that li. So for example if there is any li tags that are underneath the parent to still highlight the parent and not the current li. http://www.capellnet.com/SITETEMPLATE

Here’s the code I have currently have for the menu.

MenuItem 1

MenuItem 1.1
MenuItem 1.2
MenuItem 1.3

MenuItem 2

MenuItem 2.1
MenuItem 2.2
MenuItem 2.3
MenuItem 2.4
MenuItem 2.5

MenuItem 3
MenuItem 4
MenuItem 5

setPage()

Here’s the JS info:
arr[i].className = “current”;
arr[i].parentNode.className = “current”;

Here’s the CSS for the menu section:
/***TOP NAVMENU***/
#jsddm {
float: left;
width: 922px;
height: 25px;
background-image: url(../images/nav1.gif);
background-repeat: repeat-x;
margin:0;
padding:0;
}
#jsddm li {
float:left;
list-style:none;
}
#jsddm li a {
display: block;
padding: 5px 12px;
text-decoration: none;
background-image: url(../images/nav1.gif);
background-repeat: repeat-x;
font-family: Verdana, Geneva, sans-serif;
font-size: 12px;
font-weight: bold;
color: #666;
width: 91px;
white-space: nowrap;
}
#jsddm li ul {
margin: 0;
padding: 0;
position: absolute;
visibility: hidden;
}
#jsddm li ul li {
float: none;
display: inline;
}
#jsddm li ul li a {
width: auto;
border-bottom: 1px solid #CCC;
}
#jsddm li a:hover { background-image:url(../images/nav2.gif);background-repeat:repeat-x;}
#jsddm li ul li a:hover{background-image:url(../images/nav2.gif);background-repeat:repeat-x;}
#jsddm li a.current {background-image:url(../images/nav3.gif);background-repeat:repeat-x;color:#FFF;}

Thanks for any light you can shed on this…

By: Armand Niculescu

Armand Niculescu — Fri, 18 Dec 2009 09:13:00 +0000

It’s actually a lot easier to do this in PHP but it depends on how your site is set up — there is no general answer.
Generally speaking, you output the menu and for each item you check if it’s the current page (how? depends)
E.g.:

Item 1

Item 2
…

By: ghprod

ghprod — Wed, 16 Dec 2009 17:58:48 +0000

Hi, how to get current page but in PHP without JS?

regards

thanks

By: Bill Dashfield

Bill Dashfield — Tue, 10 Mar 2009 01:44:34 +0000

Nice little script - just what I was looking for.

One little mistake, I think (also what Alice was trying to say?):

In your explanation you say 'all links that are contained in the navigation bar (any tag with id="navbar")'
but your code says:

if (document.getElementById("nav")!=null) setActiveMenu(document.getElementById("nav").getElementsByTagName("a")

To find your navigation links, I think the "nav" in the code should be "navbar":
if (document.getElementById("navbar")!=null) setActiveMenu(document.getElementById("navbar").getElementsByTagName("a")

Thanks Bill