Clamshell Navigation
I’m back! Refreshed, rejuvenated, working like crazy, and married!
Seems that I’m reporting on nothing but Javascript these days, doesn’t it? Sorry about that - it must just be what I’m jazzed about at the moment. Anyhow, here is a little clamshell navigation script thingy that I recently put to good use. See it in action here (click on the locations on the left to expand or collapse sub-sets of locations) and then see how it’s done …
Create the Semantic Markeup
Create appropriately nested lists and give all sub-lists a class of “sub”, as well as unique IDs. Of course, style them up any way you like via CSS.
Get the Magic Script
We’re going to use our handy dandy dynamicCss script by Bobby van der Sluis (man, the uses for this little gem keep piling up!) to hide all the sublists before the page loads (saves load time and also leaves the lists accessible should one have javascript turned off).
Now link to the script in the head and also in the head place the following code, which will hide the sublists via javascript before the page loads:
<script type="text/javascript">
if (document.getElementById) { // include all feature tests needed for your DOM script
createStyleRule(".sub", "display:none;");
}
</script>
Now Grab the Show/Hide Script
Grab this great little script that I found floating around at a few different sources. I can’t take credit for it and I have no idea how it works - but it does work!
Save it as showHide.js and also link to it in the head of your document.
Calling the Show/Hide script
Here is how my final html looked. Notice that on each parent link I’ve placed the call for the appropriate ID in the onclick event. If any of you newage javascripters know how to handle this with an event handler so that we can do away with all the onclicks I’d love to hear from you!
But as far as my skills go, this is it:
:x:
<ul class="clamshell">
<li>Europe Italy
<ul class="sub" id="ei">
<li>Puglia</li>
<li>Tuscany</li>
<li>Umbria</li>
<li>Veneto</li>
</ul></li>
<li class="on">Europe France
<ul class="sub" id="ef">
<li>Austria</li>
<li>Bordeaux</li>
<li>Brittany & Normandy</li>
<li>Burgundy</li>
<li>Croatia</li>
<li>Dordogne</li>
<li>Loire Valley</li>
<li>Provence</li>
<li>Tour de France</li>
</ul></li>
<li>Europe & the Mediterranean
<ul class="sub" id="em">
<li>Czech/Austria</li>
<li>Denmark</li>
<li>Holland</li>
<li>Ireland</li>
<li>Norway</li>
<li>Portugal</li>
<li>Spain & Portugal</li>
<li>Switzerland</li>
<li>Turkey</li>
</ul></li>
<li>Asia & the Pacific
<ul class="sub" id="ap">
<li>Bali</li>
<li>China</li>
<li>Hawaiian Islands</li>
<li>Japan</li>
<li>New Zealand</li>
<li>Thailand</li>
<li>Vietnam</li>
</ul></li>
<li>Latin America
<ul class="sub" id="la">
<li>Chile & Argentina</li>
<li>Costa Rica</li>
<li>Mexico</li>
</ul></li>
<li>North America - West
<ul class="sub" id="naw">
<li>Alaska: Southern Wilderness</li>
<li>California</li>
<li>New Mexico</li>
<li>Utah/Arizona</li>
<li>Washington</li>
</ul></li>
<li>The Rockies - Canada & US
<ul class="sub" id="ro">
<li>Canadian Rockies</li>
<li>Montana</li>
</ul></li>
<li>North America - East
<ul class="sub" id="nae">
<li>Mississippi & Louisiana</li>
<li>Nova Scotia</li>
<li>Prince Edward Island</li>
<li>Vermont: Northern</li>
</ul></li>
</ul>
That’s a Wrap!
This is cool because it works, it’s made up of simple, semantically nested lists, it’s relatively easy to edit/maintain, and it leaves all the content accessible to those with javascript turned off (I’m just waiting for David to find flaw with this method though!). ;o)
Here it is in action again. Check it out with Javascript disabled and see how it holds up.
April 4th, 2006 at 10:56 pm
This is awesome! I can definitely see myself using this in the near future. Thanks for sharing!
April 6th, 2006 at 2:10 pm
Congrats to you and your new hubby! You look gorgeous.
April 7th, 2006 at 9:57 am
Excellent example, but I noticed that the page has to reload to accept the changes, and takes the user back to top. I found a neat script at Gazingus.com that has the same use but keeps the page intact. I use it on the sitemap for one of my sites. Here’s an example with the menu moved way down the page: http://www.cordair.com/sitemap/long_example.htm
I love your site, by the way. Standards AND a fantastic esthetic!
April 7th, 2006 at 6:41 pm
Chris:
The reload is actually something that shouldn’t happen if I had copied my show/hide script correctly. I forgot to add the “return false” at the end.
Anyway, the script has been modified and I think that should solve the problem.
April 7th, 2006 at 7:07 pm
Sweetness.
April 8th, 2006 at 11:37 am
Neat script that, I created a somewhat similar one though not at all anywhere near semantic, I’m getting there.. slowly.
I’m working on creating a web application interface, lots of dynamic content in divs, loads of javascript. Lots of late nights ;-)
Btw Mani, A darned pretty couple you guys make :)
Cheers
Jai
April 11th, 2006 at 11:36 am
Jai: Thank you very much!! =)
April 14th, 2006 at 3:41 am
Hi and thanks for tip.
I can click the links to colaps the lists, but I am having problems though getting the list to hide on load.
I have the snippet above in the header like you said.
Any advice?
Also what is the trick to have a second level clamshell?
Thanks
Mike
Miami
June 16th, 2006 at 1:17 pm
Sorry about that. The form stripped out all the good parts of the code. I’ll email it.
January 28th, 2007 at 1:04 pm
Hi,
I found your blog via google by accident and have to admit that youve a really interesting blog :-)
Just saved your feed in my reader, have a nice day :)
August 17th, 2007 at 12:27 pm
This looks promising. However the link to the showhide script is broken. I did some poking around your blog, but could not find it.
August 18th, 2007 at 9:25 am
Lani: Sorry about that! The script can be found here.
I’ve also recently employed this technique with good success: http://www.javascripttoolbox.com/lib/mktree/. It’s a nice one because it allows the image to change from a plus to a minus.
Good luck!
October 30th, 2007 at 5:58 pm
I am trying to use this on a WordPress site, is that possible??
October 31st, 2007 at 9:43 am
Justin:
I don’t see why you couldn’t use it in a WordPress site.
You might want to check out this tree menu, which I have discovered since writing this article: http://www.mattkruse.com/javascript/mktree/
Cheers,
Mani