[thelist] DHTML Menus

Beau Hartshorne beau at hartshorne.ca
Sun Nov 23 20:55:36 CST 2003


Hi all,

I wanted to implement some DHTML menus on a site, and liked the idea
behind the Gazingus code:

http://www.gazingus.org/html/Using_Lists_for_DHTML_Menus.html

example:

http://www.gazingus.org/html/menuDropdown.html

I've adapted this script to my site, and have made a few changes:

1. I altered it to suit the style of my site, and to work horizontally
instead of vertically.

2. Now users with JavaScript disabled can access the menus (but without
the dropdown effects).

3. I removed as many of the CSS class and ID tags as I could from the
HTML, and instead used more precise CSS selectors to control the style.

4. The menus are activated with an onmouseover instead of an onclick,
and will disappear of you move the mouse out of the submenus.

5. I made a for loop that initialises the script instead of several
initializeMenu calls that needed to match the menu list.

Here's my version:

http://hartshorne.ca/homesystems/template.html
http://hartshorne.ca/homesystems/menu/menu.css
http://hartshorne.ca/homesystems/menu/menu.js

Does anyone have any comments about the code? I'm especially interested
in the "correctness" of the JavaScript and CSS implementations. Also,
does it work in your browser? There are some positioning issues that I
haven't worked out in IE 5 Mac/PC, but they are minor and I don't want
to add any more JavaScript code (especially detect code) than is
necessary to make these work.

Thank you,

Beau



More information about the thelist mailing list