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
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,
transparent LAYER must also exactly match the height of the underlying LAYER,
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
And Netscape lost the bowser wars because Microsoft was a big bad monopolist... My
Copyright (C) Bowmain Ltd. 2002, 2003