Over at JuicyStudio, Gez Lemon’s posted an elegant nested list site menu script that’s 80% of what I needed.
I’ve been wanting to replace the nested DIV and href="javascript: menu of a site for which I’m responsible with a nested list and onload-assigned handlers: something like:
<ul>
<li>Section One
<ul>
<li><a href="...">Some Link</a></li>
...
</ul>
</li>
<li>
Section Two
<ul>
...
</ul>
</li>
...
</ul>
When you bind the show/hide scripts for sections to the list items, the JavaScript event model trips you up. If you expand a list, then click on one of the expanded items, the parent list item receives the event as well. So if you click on a link, the whole sub-menu collapses.
You can catch events and stop bubbling, but that’s just annoying.
That’s why you’ll often see these nested menus in the form:
<ul>
<li><a href="javascript:displayFunction('Section One');">Section One</a>
<ul>
<li><a href="...">Some Link</a></li>
...
</ul>
</li>
<li>
<a href="javascript:displayFunction('Section Two');">Section Two</a>
<ul>
...
</ul>
</li>
...
</ul>
That allows you to trap the clicks within an element, and not worry about them bubbling up through the list. But you’re still getting your HTML and JavaScript entangled.
Gez Lemon’s menu lets you start from an unadorned nested list (above) and call a script that turns the Section One, Section Two, text into A elements with show/hide functions bound as onclick events. If JavaScript’s turned off you get a nested list, and no loss of basic function.
Why does this matter? When you’re generating the menu in your content tool, you don’t have to worry the JavaScript wiring. The HTML generation code (be it templates, Markdown, or XSLT) required becomes less complex, and easier to maintain.
