DHTML Menus

This is probably nothing particularly wonderful any more, if it ever was, but I am quite chuffed by it and, if nothing else, I would be interested to hear of additional ways it may be broken. Anyway, since days of yore when I first read sil’s Unobtrusive DHTML, and the power of unordered lists I’ve been intrigued by the idea of doing css/javascript menus that aren’t uncompliant arse. I think I’ve finally done it. In addition, it leaves me free of the tyranny of the three column design and lets me have a wide area of text across the screen which is also near the top. The result you can see above this page and it should work on up to date versions of IE and Mozilla/Firefox. It has been sort of working for a while but I’ve had difficult issues with overlapping submenus and suchlike.

My philosophy was that:

• It should use css as much as possible and be light in JavaScript. JavaScript is unavoidable as pure css methods are still not possible, especially on IE. Javascript does the work and css handles the arrangement of the menu items.
• It would work on Mozilla/IE without browser detection and any browser-specific code. There is one line of css that overcomes a minor IE glitch, which isn’t too bad. Goodness knows about Opera, although I think it’s probably OK.
• It should work on normal biodegradable lists as mentioned in sil’s article above. For practical reasons it was easier to say that all li’s must have a’s inside them. In practice, this works out fairly easily as most menu items must point to something. Placeholding menu items have href=”#”. The script detects a menu with id of “menu” and works it all out from there.
• It should work like a normal Windows menu that most people (especially me) are used to. This means that you should click on the menu first before things start dropping down; also, clicking on the screen should get rid of the menu. A lot of dynamic web menus seem to rush out at you whether you like it or not.

It uses two files to which you need to link: newmenu.js and newmenu.css in something like the following manner:

<link rel="stylesheet" href="newmenu.css" type="text/css" />
<script src="newmenu.js" type="text/javascript"></script>

The css is as basic as needs to be to create working but tidy menus. Additional or changed styles need (or should have) a separate stylesheet. You also need to put in something to initiate the script. I have the following in the header:

<script type="text/javascript">
	 function init () {
	  	startmenus();
		whatTimeIsIt();
	 }
	 window.onload=init;
</script>

This is because I also have a clock script that needs initializing. There are no doubt better ways of doing it. Menu items with submenus are assigned the class “sub” so styles can be added appropriately.