version 1

This is version 1 (March 2004), my first bash at an intelligent CSS-driven menu. I got a bit carried away with being all self-congratulatory about XHTML and CSS compliance.

My favourite part of the menu is the links themselves. The key is display: block in the a style, which lays out the links on separate lines in full-width blocks without having to enclose them in block-level elements like divs. From there, we can use a:hover to simply add an outset-to-inset inverting border, change the background and text colours etc. And if you're doing that, might as well also do something similar for a:visited.

The raised white borders are something I wanted to reproduce from an earlier, table-driven version of the site. You can't do them using a single CSS border - it requires two nested blocks: an "outer shell" which produces the outer outset border and white margin, and an "inner shell" with inset border for the contents. I wrapped each of these in a further ID'd div to distinguish between Menu and Main, so that most aspects of the outer and inner shells could be shared but some could be altered individually. So there are actually 3-deep nested divs for each of the Menu and Main areas. This is a bit over-complicated really, and is getting into the realm of letting the style dictate the semantic markup.

The other problem with this layout is on small screens (eg PDA). The menu tends to get in the way of the actual content, because it's fixed on the left and "on top". The menu is wider than it needs to be, but just making in thinner is not going to help. What can be done? Well, we either move it somewhere else, or we try and make it disappear when not needed. The latter sounds like more fun. On to Version 2.