Currently at work I’m working on drop-down menus. While there are some pretty heavy duty scripts out there (like the hvmenu), best-practice suggests the use of semantically structured menus, a la gazingus’ or eric’s list-based DOM/CSS menus.
As an aside, I just ran some stats, and at least for the summer, our NS4 stats are much improved. It looks like we’re at about 3.5%, still higher than the average, but much lower than earlier this year (8%). A large effect is that with the students gone, the user labs aren’t being used. Thankfully, NS4 is scheduled for removal from lab machines for the fall.
In any case, all should be good an well. I have a JavaScript shunt for disabling the drop-downs for NS4, and the rest will just be straight lists. However, of course there’s complications. In this case, spacing. Looking through the css-d archives it seems that this is pretty unavoidable. That is, in the DOM, whitespace is read as #text. Oops. (related: table spacing).
There seem to be two options: 1) remove all the spaces in the source or 2) remove the spaces via the DOM. For simplicity, I chose a variation of the former, and used comments to preserve some sense of legibility. An ugly hack, yes, but well, nothing unusual when dealing with making things ‘look right’.
- Test 1
- Test 2
- Test 3
<ul>
<li>Test 1</li>
<li>Test 2</li>
<li>Test 3</li>
</ul>
- Test 1
- Test 2
- Test 3
<ul><!--
--><li>Test 1</li><!--
--><li>Test 2</li><!--
--><li>Test 3</li><!--
</ul>
Related:
- Developer-X: Degradable, OOP DHTML Tabs
- Kalsey: CSS Tabs with Submenus (demo)
- dive into mark: Pure CSS tabs, CSS tabs redux
- megnut: Are you crazy about CSS?
Upcoming: return of permalinks, playing w/ TypePad