About this page
This is a pure CSS pop-up menu; there is no JavaScript being used for the popups.
If nothing happens or it looks strange, then you're using a browser that doesn't fully support CSS - sadly, the only browsers that supports CSS well at the moment are Mozilla 1+ and Netscape 7.
The advantages:
- Using CSS is a great deal more accessible than using a JavaScript menu - the text can be resized and mostly reflows.
- It's easy to change the menu style - for example, in Mozilla/Netscape 6+, switch to the alternate left menu stylesheet
- According to The Counter, about 10% of users have JavaScript turned off, presumably for reasons of security. This menu will still work in their browsers.
- The CSS code is considerably smaller than the equivalent JavaScript.
The disadvantages:
- The implementation being used here isn't perfect for resizing - very large text still causes it to behave badly. I have written a better implementation, but although I think the CSS is correct, it doesn't work in any existing browser.
- Browser support - only Mozilla 1+ and Netscape 7 (not even Netscape 6.2) currently supports the CSS being used.
- I don't think you can highlight the menu item for the current page using pure CSS - but you can using JavaScript
Update: Greg Schmidt of Trawna Publications points that you can highlight the menu item for the current page, by providing an ID in the body, and then referencing that in your CSS. He's using the technique on his webpage.
The page code
References
The CSS used here was originally inspired by Eric Meyer's CSS popup demonstration, and he's since pointed me towards his own independently written version.