mail us  |  mail this page

contact us
training  | 
tech stuff  | 

Client Side - Pop-Out Menus

Now updated for horizontal, vertical and tertiary menus.

This page describes the implementation details of our Lightweight (we think) Pop-Out menus using cross-browser DHTML, CSS and Javascript.

Cross Browser Fantasy

All Browsers are different. Case closed. But the W3C DOM has improved things (or is it just a high quality Gecko implementation) - which actually only makes the differences more annoying!

Cross-Browser Analysis (Nov 2002)

We have changed our cross-browser philosophy (big word) 'cos:

Our New Policy

Here's what we are doing now and all the code reflects (more or less!!) this policy:

There is ton of stuff out there about the W3C DOM but the best, by far, that we found is in the 'Resources' side-bar under 'Life Savers' and in our links pages.

Object and Event Models - Plural

The holy grail of the HTML, XHTML and XML object worlds is the W3C Document Object Model DOM Versions 1 and 2 (see Resources and forget DOM 1).

Microsoft Internet Explorer

Confusingly Microsoft uses two terms: the DHTML Object Model (a DOM) and the W3C'ish Document Object Model (another DOM). They are different. The DHTML Object Model was supported from IE4, the W3C DOM 'ish from IE 5.5+.

Our minimum browser choice is IE4 so we use the DHTML Object Model (backward compatibility is very strong with MSIE so all that crummy old code will still work in MSIE 6+).

The MSIE Event model 'bubbles-up' vs Gecko/NS 'top down' event model.

Netscape Navigator - a last Hurrah!

The Navigator 4.06+ world uses the idiosyncratic LAYERS, CSSP and Style sheet model (defined in the Javascript 1.3 documentation). Ground-breaking at the time - just plain quirky to-day. As noted above we are doing no new work for this browser. Our minimum browser support is NS 4.06+ so you will see LAYER and CSSP stuff lying around. It's Event Model includes the powerful ability to 'hook' events which has been carried over to Gecko (and the W3C Event Model).

Gecko - (Mozilla, Galeon, K-Meleon, NS6+)

A very W3C compliant browser which is a pleasure to work with and with some excellent documentation - normally the achilles heel of Open Source projects. If you are not using it you should be. The event model is largely based on the NS4.x philosophy but without the event generation limits.

The W3C DOM and the version 5 browsers

We came to do the update for the version 5 browsers having read all the stuff about W3C DOM compatibility and thinking it would be a breeze - and it wasn't.

We have some simple text rollover effects and they work in both browsers (MSIE and Gecko) unmodified. Very impressive. One hour and the site was updated.

Then we tried our pop-outs and it was not so good - in fact it did not work at all. Our CSS definitions are consistent but the Javascript - no way. So we hit the web. Turns out that the W3C DOM 'event model' is not supported by MSIE and marginally by Gecko. See below what we actually had to do.

Javascript

The holy grail of the Javascript world is ECMA-262 which defines only hardcore (non DOM) language features and provides a frame-work for a standard language that is vendor independent. A mercifully thin document. Though almost incomprehensible.

Pop-Out Functionality

We are going to lay out our pages as follows:

NOTE: In the descriptions below you will be offered two forms of each file. A Cross-Browser version containing code/definitions for all browser families we support and which is conditionally generated using Apache Server Side Includes statements and a Browser specific version which shows you the code that is supplied for, and is unique to, the browser you are using.

Browser Specific CSS Style Sheets

The current implementation of our Cross Browser CSS definitions are here (loads in a separate window as a text file, use the 'save as' browser button to save as an .SHTML file) or you can view your browser specific Pop-Out menu CSS definitions here. They both load in a separate window so you can read the accompanying text and look at the code.

You will notice three major differences in CSS definition:

DHTML, DIV and LAYERS

The current implementation of our Cross Browser 'Primary' DHTML definitions are here (use the 'save as' browser feature to save as an .SHTML file) or you can view your browser specific 'Primary' Menu definitions here. They both load in a separate window so you can read the accompanying text and look at the code (wow - at the same time).

There are a number of points of difference here:

The current implementation of our Cross Browser 'Secondary' (Pop-Out) DHTML definitions are here (loads in a separate window as a text file, use the 'save as' browser button to save as an .SHTML file) or you can view your browser specific 'Secondary' (Pop-Out) Menu definitions here. They both load in a separate window so you can read the accompanying text and look at the code.

This set of definitions includes the initially invisible tables that are 'pop'd out' when the user 'mouses over' the various menus. There are significant differences here reflecting the differing browser philosophies:

Browser Specific Javascript

The current implementation of our Cross Browser Javascript code is here (loads in a separate window as a text file, use the 'save as' browser button to save as an .shtml file) or you can view your browser specific Pop-Out Javascript code here. They both load in a separate window so you can read the accompanying text and look at the code.

The code mostly reflects the various differences in manipulation of the object models and consists of eight functions, pop() (all browsers), popdown() (Gecko/NS4.x only), clip()(MSIE/Gecko only), unpop() (MSIE/Gecko only), unpop() (Gecko/MSIE only), swapout() (MSIE only , null function for Gecko), popclean() (MSIE/Gecko only), mousemoved() (NS4.x only, provides same functionality as Gecko popdown()).

Note: The functions swap() and lock() are generic text rollover functions we use extensively, gotourl() is a simple redirect - none have anything to do with this article.

All Good Things..

That's all folks. I hope you have found this information and explanation useful or at least it has given you something to start thinking about 'lightweight' web features. Check our links pages for all the reference material (use Languages/Javascript and Web Resources/html_dhtm or css). If you have comments, questions, solutions to some of our problems or suggestions for improvements we would be delighted to hear from you. In the meantime we should really clean this stuff up...



Problems, comments, suggestions, corrections (including broken links) or something to add? Please take the time from a busy life to 'mail us' (at top of screen), the webmaster (below) or info-support at zytrax. You will have a warm inner glow for the rest of the day.

Tech Stuff

If you are happy it's OK - but your browser is giving a less than optimal experience on our site. You could, at no charge, upgrade to a W3C standards compliant browser such as Firefox

web zytrax.com



HTML Stuff

W3C HTML 4.01
HTML5 (WHATWG)
HTML4 vs HTML5
HTML5 Reference
W3C Page Validator
W3C DOCTYPE

CSS Stuff

W3C CSS1
W3C CSS2.1

DOM Stuff

W3C DOM
W3C DOM Events
Gecko DOM
MSIE DOM

Usability/Access

usability.gov
W3C -WAI
Web Style Guide
Michael L Bernard
WebAim.org

Jolly Useful

Peter-Paul Koch
A List Apart
Eric Meyer on CSS
glish.com
DOCTYPE definitions

Our Stuff

Our DOM Pages
DOM User Guide
DOM Explorer
DOM Navigation
CSS Short Cuts
CSS Techniques
CSS overview
Oh Really!

Javascript

ECMA-262

Pop-out Menus

webmasterbase.com
Brainjar Menubar
Our Lite JS Menus
Our CSS Menus
Tigra Menus

Site

CSS Technology SPF Record Conformant Domain
Copyright © 1994 - 2017 ZyTrax, Inc.
All rights reserved. Legal and Privacy
site by zytrax
Hosted by super.net.sg
web-master at zytrax
Page modified: July 11 2011.