Comments on: Collapsing Navigation in jQuery

By: Dane

Dane — Sat, 13 Feb 2010 15:11:22 +0000

Also, for anyone who wants to have nested list items, I created an example that works for infinitely nested navigation elements:

Basic Many-At-A-Time Collapsing Navigation “Infinite Depth” Edition

The green “hyperlink” color is merely diagnostic, and helps to visually distinguish real hyperlinks from navigation controls.

By: Dane

Dane — Sat, 13 Feb 2010 15:08:10 +0000

Hi Kate,

Thanks for the message! Unfortunately the script is pretty simple, so it doesn’t know what page you are on in the site, or how that page would relate to the links in the navigation.

I whipped up a quick example that might work for your purposes:

Basic One-At-A-Time Collapsing Navigation “Smart” Edition
Stylized One-At-A-Time Collapsing Navigation “Smart” Edition

It checks for a class assigned to your “body” element, and sees if that class corresponds to a class assigned to one of the sections in the collapsing navigation. If the class of the “body” and the class of the “li” match one another, it displays that section. Otherwise, it defaults to displaying the first section.

The class I’m using is “section-x”, where x is the number of the section. So, when you’re playing with the code, try changing the class of the body to a different number, to trigger a different section to open by default.

I commented the code in these examples as well, to make it a bit more clear what’s going on.

Hope this helps!

By: Kate

Kate — Fri, 12 Feb 2010 16:36:34 +0000

Menu works great! Thank you! however, when I’m, let’s say, on a third page in a second section, the menu still opens the first section, probably because of this line:

$(“#collapsing-nav > li:first”).addClass(“selected”);

(just a guess, I don’t really know JS that well)

I have added IDs to all my tags, but I don’t know how to call them.
Can you help?

By: Dane

Dane — Tue, 29 Sep 2009 14:32:50 +0000

Both examples work for me on Windows XP with Internet Explorer 6 and Internet Explorer 7.

By: Bobbi Williams

Bobbi Williams — Mon, 28 Sep 2009 21:37:42 +0000

One more point: your examples (above “One-At-A-Time” Collapsing Navigation and “Many-At-A-Time” Collapsing Navigation) don’t work for me either.

By: Bobbi Williams

Bobbi Williams — Mon, 28 Sep 2009 21:34:31 +0000

I recently hired a local firm to modify the website above to include a menu with dropdowns [see their demo at: http://clients.sumdes.com/RAI/. And though it works fine on my older system and my laptop, for some reason they are unable to identify, the dropdowns don't work on my desktop system [running XP]. I have tried it in IE and in Firefox with no success. Also, I have turned off my firewall, my popup blocker, reinstalled the latest service pack and software updates for IE and reinstalled the latest version of JAVA. But they have thrown up their hands and said “We’ve tested this in Opera, Firefox (windows and mac), Safari, Google Chrome, IE 6, 7, and 8 and even in the iPhone Safari browser. Everything works perfectly.” I finally looked into the code and discovered that they are probably using your Google API, so I wonder if you (or anyone) have any idea what’s wrong.

By: Drew

Drew — Wed, 25 Mar 2009 08:47:04 +0000

You’re a good man for documenting this. Thanks Dane!

By: Dane

Dane — Thu, 12 Mar 2009 04:20:41 +0000

Cool! Thanks, Charlie!

By: Charlie Barker

Charlie Barker — Thu, 12 Mar 2009 03:32:14 +0000

Oh I forgot to mention if your using this in a public website you could reference the google jquery.js file. There are two benefits the first is speed as many of the ppl accessing your site will already have a copy of the file in their browsers cache. The second is less bandwidth usage on your site.

By: Charlie Barker

Charlie Barker — Thu, 12 Mar 2009 03:23:52 +0000

Works well in the safari browser on the iPhone.