DHTML Dropdown Menu - Part 1

These pages explain how to implement a dropdown menu. Some of the bizarre difference between browsers are highlighted.

Why? The author has changed dropdown menu scripts about 3 times and doesn't want to have to do it again. (The author is lousy at picking which menu scripts will be supported long-term and have stable free licencing) The easiest solution is just to create and document an OS version. After all, how hard can it be?

Netscape 4.x

Implementing a Menu Item

This page is best viewed with Netscape 4.6. If viewed with other browsers (e.g. IE, Netscape 6.2+) the menu item in the LHS pane may not behave properly. (It may be hiding at te bottom of the page)

The W3C STYLE attribute works on the SPAN tag but not much else, and there are some well known bugs. Cross browser support => Need to put SPAN tags around everything to specify text and background colours, font size, family, style and weights! FONT tags cannot specify font sizes in points so STYLE tags are preferable.
It is not possible to use both Netscape LAYER positioning and STYLE positioning as use of STYLE positioning within a LAYER on Netscape 4.6. causes the LAYER to behave very strangely. => Have to use one method for NS4.x and another for almost every other browser.
NS4.x events are limited to say the least. The MOUSEOUT event is used to hide the dropdown menu when the mouse moves outside the dropdown menu area, but is only reported by LAYER and ANCHOR tags. The menu item (shown at left) consist of a LAYER to trap MOUSEOUT events, a TABLE to define the menu item area and a SPAN tag to control fonts and colours inside the TABLE.

The menu item at left updates the status bar with the message "LAYER:onMouseOut" when the mouse leaves the menu item area. Source is displayed below.
The MOUSEOVER event is handled in the same way as MOUSEOUT. The menu item at left updates the status bar with the message "LAYER:onMouseOver" when the mouse is over the menu item area.
The CLICK event is reported only by Button, document, Checkbox, Link, Radio, Reset, Submit. The obvious next step is to attach the CLICK handler to the LAYER document, however this does not work as HTML residing in the LAYER shields the the underlying LAYER from the CLICK events.

The solution is to create another transparent LAYER that sits exactly over the top of the previous LAYER and handles the CLICK, MOUSEOVER and MOUSEOUT events. The MOUSEOVER and MOUSEOUT events can be defined in the LAYER tag, however the CLICK event requires Javascript for some reason. The height of the transparent LAYER must also exactly match the height of the underlying LAYER, and this also requires a single line of Javascript.

The menu item at left has been enabled to detect mouse clicks.
It would be nice if we could easily manipulate the text and background colours but yet again NS4.x lets us down. The answer as you may have guessed by now is to add another layer that sits over the top of the first layer and contains the same text but uses the highlight colour scheme. Normally this layer is invisble, but when the cursor moves over the menu item, the highlight layer displayed.
Most DHTML menus support solid borders around menu items. Border attributes and CSS are not reliably supported in NS4. The only real solution is to add another layer below the others 3 layers and fill it with border colour. If a border is defined, the border layer is made larger in size than the normal and hilite layers and shows around the edges as a border.

The border layer (called the baseLayer) in the DHTML code presented later is used as a parent layer for the other 3 layers to simplify positioning logic.

And Netscape lost the bowser wars because Microsoft was a big bad monopolist... My arse !!

Menu Item