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.
The problems with frames
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
To make it work more like a popup menu the function that makes the menu visible takes a special object,
The menus are built with tables much like in the old menu but there are some small differences.
The table should have the
Sub menus look exactly like normal subs. The difference is the menu item that associates the sub menu.
The menu item should have the
<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>
Here I've added a
Disabled and separators
To disable a menu item just set the class name to
<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>
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.
Customizing the look
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.
Showing a Menu
To show a menu you just call a function called
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.