The most common question we get is about the old dhtml menu and how to use it with frames or how to modify it to work as a popup menu. Therefor I've created a new menu system from scratch that took these issues into account from the beginning.
Frames are so called windowed controls and such are created in a new window object. These windows are opaque and can not be displayed below ordinary HTML elements. The only thing that can be displayed in front of a windowed control is another windowed control. I choose to use scriptlets because these allows a good abstraction and allows the author to assign methods and properties to them as well.
I will not explain in detail how this script is made but I will point out the basic idea. When a menu is
going to be displayed a scriptlet is inserted dynamically with
insertAdjacentHTML and once this
scriptlet is loaded the content of the menu is copied into the scriptlet and the scriptlet is made visible.
To make it work more like a popup menu the function that makes the menu visible takes a special object,
Boundaries, as an argument. This object represents a box that the menu should be displayed relative to.
(More about this later.)
The menus are built with tables much like in the old menu but there are some small differences.
The table should have the
class set to
menu and you should also set the
0. Each row in the table is treated as a menu item. The attribute
href is used for the location that should be loaded when the item is clicked and
target is for the name of the designated window to load the location in. Below is a simple menu:
|Menu Item 1|
icon added to the
TD containing the icon image.
This menu looks like this.
Sub menus look exactly like normal subs. The difference is the menu item that associates the sub menu.
The menu item should have the
class name set to
sub and you could either include a nested table
or set an attribute called
menu to the id of the sub menu. I'll show you how.
<table class="menu" cellspacing="0" id="testMenu2"> <tr class="sub" menu="testMenu1"> <td></td> <td>Menu with <b>menu</b> attribute</td> <td class="more">4</td> </tr> <tr class="sub"> <td></td> <td>menu with nested table tags</td> <td class="more">4 <table class="menu" cellspacing="0"> <tr> <td></td> <td>Simple</td> <td></td> </tr> </table> </td> </tr> </table>
|Menu with menu attribute||4|
|menu with nested table tags||4
Here I've added a
TD with the
more to create a right arrow that indicates
that there is a sub menu.
This menu looks like this.
To disable a menu item just set the class name to
disabled. A separator is a little bit trickier but once you
have made one you can just copy the code.
<table cellspacing="0" class="menu" id="testMenu3"> <tr class="disabled"> <td class="icon"><img src="../../images/openfoldericon.gif"></td> <td nowrap>Disabled Menu Item</td> <td></td> </tr> <tr class="disabled"> <td colspan="3" style="height: 10px; padding: 0;"><div style="border: 1px inset ; height: 2; overflow: hidden;"></div></td> </tr> <tr title="You can also use tooltips easily"> <td></td> <td nowrap>Above is a separator</td> <td></td> </tr> </table>
|Disabled Menu Item|
|Above is a separator|
The code for the separator is not as nice as I wish but at least it looks and behaves as it is supposed. The menu looks like this.
The only place that is responsible for the look of the menus is the css file so if you know CSS you can easily change the look and feel of the menus.
To show a menu you just call a function called
showMenu that takes three arguments. The first is a the table
element that describes the menu. The second is a
Boundaries object and the third (which is optional) is to describe
wheter the menu should be displayed below (
"vertical") or besides (
"horizontal") the box definde by
the boundaries. A
Boundaries object can be created in three differnet ways. The first is to give it one argument that
is an HTML element that the menu should be displayed around:
The second and third take either 2 or 4 arguments and the first two are the left and top position and the third and fourth arguments are the width and height of the boundaries. If the two last arguments are omitted the width and height is set to zero.
new Boundaries(left, top, width, height) new Boundaries(left, top) // equals new Boundaries(left, top, 0, 0)
Now you are ready to show your menu:
<a href="" onclick="showMenu(testMenu3, new Boundaries(this), 'vertical'); return false;">this</a>
Next I'll show you how to create a popup menu (IE5 only) and then I'll describe how to create a menu bar and last but not least I'll show you how to combine this with the dock bar.