Making menus using visibility in DHTML
Please note, this menu suffers from the Gecko engine mouseout bug and layer tag bug
in Mozilla and other Gecko based browsers like Netscape 6+. I have resolved these issues in the
even more advanced Auto-generation Popup Menus with delay version. This menu
also does not validate, and it is not intended for real use, it's just here so you can understand the complexity
required for these things. The auto-generation version deals with these problems.
To download the script(s), see the script license, and check details like browser compatibility, use the links on the navigation panel at the top of this page.
This show/hide part of this menu system works the same way as the
basic menu system.
This version is special because I have made the menu cells highlight, and
the tables automatically close after 500ms if the mouse is not over any part
of them. To achieve the closing effect, I have used the unofficial <layer ...>
tag in Netscape 4 because when using that syntax, I can make it detect
events without having to say to capture them first.
The highlight effect is a bit more messy. The cells are held in a table. The
cells are made using a <td> element. In non-layers browsers,
this can detect mouseovers etc. When they are detected, the backgroundColor style
is changed (in Opera versions lower than 6, the background style is changed). In layers browsers,
an unpositioned layer is held within an <ilayer>, within the
table cells. The 'ilayer' - 'unpositioned layer' combination positions the layer
directly over the top of the ilayer. The layer can detect the mouseover and
mouseout events. When these are detected, the layerObject.bgColor
is changed.
Notes in layers browsers:
- When an image is aligned to the right, the layer will become 3 pixels wider than normal
(note that I have compensated for that in the source code).
- The table cells are 19 pixels high by default. In non-layers browsers, the cells will expand
if the contents of the cell become too large. In layers browsers, the layers will expand but
the table cells will not. For this reason, hidden behind each layer, the same text is repeated
so that the table cell will expand.
|
This is an extra level (third level)
|
|
|
This is also an extra level (third level)
|
|
|
This is an extra level (second level)
|
|
Bomp Bomp Bomp
The Camel Lost His Hump
He Sat On A Peg
After He Broke His Leg
And He Lost His Handbag Too
The Wuss!
|
|
A third level
Search