This is a simple menu system designed to work in Internet Explorer, Mozilla and Opera. This does however lead to some limitations and I'm going to cover some these and see what can be done and how. If you are not interested in these you can go directly to the implementation description.

Static Content Model

Opera has a serious limitation when it comes to DHTML and that is that you cannot change the content at runtime. This means that you cannot add or remove nodes. It also means that you cannot modify a text node (no way to change the text). This means that we cannot add and remove menus at runtime. Everything needs to be created at load, therefore we use the old classical document.write to generate our content.

Element boundaries

Opera does not have any way to find position and size of an element. This forces us to hard code the sizes and positions of the menus. This might seem like a big issue and yes it can be. However this limitation is not a big problem for menus used as navigation tools becasue navigation tools should always be placed at the same position. (Basic user interface design principles.)

All three browser do allow you to get the size of the document. This has not been used in the implementation but an improved version of the menu system can be created to prevent menus from being displayed outside of the document. The needed properties for this are listed in the table below:

Description Internet Explorer Mozilla Opera W3C DOM
Document width document.body.offsetWidth window.innerWidth window.innerWidth document.defaultView.getComputedStyle(document.documentElement, null).getPropertyValue("width")
Document height document.body.offsetHeight window.innerHeight window.innerHeight document.defaultView.getComputedStyle(document.documentElement, null).getPropertyValue("height")
Document scroll left document.body.scrollLeft window.pageXOffset window.pageXOffset Not available
Document scroll top document.body.scrollTop window.pageYOffset window.pageYOffset Not available

Event Model

Only Mozilla supports the W3C standard way of hooking up events correctly but all three browsers almost support the event attributes on html identical. The big difference is that IE incorrectly binds the event object to the window object. The menu system does not need the event object because all elements pass all the desired arguments in the event attributes.

<a href="myuri" onmouseover="webFXMenuHandler.overMenuItem(this)">...</a>

Box Model

This is the biggest problem today when trying to create cross browser DHTML applications because Internet Explorer does not support the correct box model. CSS3 has a proposed property called box-sizing which currently have two possible values, border-box and content-box. Border box is what IE is using and content box is what CSS1 uses. Border box means that the width is calculated including the border and padding. Content box does not include the borders nor the padding. This gives Mozilla and Opera a wider box and therefore som extra properties are needed to make the layout identical in the different browsers.

There is a trick that can be used when defining the CSS for cross browser applications. IE5 added a proprietary value called expression which evaluates an expression and uses that value as the value for the property. All browsers with correct CSS support should ignore invalid CSS declarations so declarations done using expression are ignored. The following CSS declarations give the same look and feel in all three browsers.

.selector {
   border:  10px solid black;
   padding: 10px;
   width:   60px;
   width:   expression(100);

Opera Focus Bug

The menu system uses the events onfocus and onfocus to show and hide the menus. This allows an easy way to make sure the menus are hidden with almost no code.

Opera does however not support focus on anchors but this is being emulated so that it at least works with the menu system. To do this we listen for mousedown on the document and and store the target. If the target is an anchor then this is checked if it is the focused anchor. If the focused anchor changes the values of the onfocus and onblur attributes are evalutad. This might however conflict with other scripts using onmousedown on the document.

Introduction & Browser Issues
Look & Feel
Hover Menu

Author: Erik Arvidsson