mail us  |  mail this page

contact us
training  | 
tech stuff  | 

Lightweight Pop Out Menus

The Fateful Decision

Updated for W3C'ish DOMs and including horizontal, vertical and tertiary menus in both directions. If your browser is W3C compliant (Gecko only in mid 2003) the pop-ups. pop-downs do not use javascript at all - they have been implemented with pure CSS. Not a line of code in sight.

We decided to do a site makeover in '2000 for all kinds of reasons. We reviewed all the possible alternative and snazzy technologies we had seen and the only that that consistently ranked high on everyones lists of 'useful' (as opposed to 'snazzy') was pop-out (or pop-down) menus. These pesky creatures, the consensus was, speeded up in-site navigation and had the additional benefit that you could check early on if you were going down the right path.

We had to have pop-out menus on the new site.

You can skip the rest of this soul-searching explanation and get to the tech meat here.

Apache Configuration and Browser detection
Cross Browser DHTML, CSS and Javascript (Jscript)

We looked at the available choices (free stuff naturally) and they are great, maybe even fantastic (see our links pages). But on closer examination we decided not to use them for the following reasons:

The Inevitable Strategy

It was pretty obvious, pretty early (like the second day) that we were stuck with supporting each browser family differently...so having accepted that...and wanting lightweight menus (OK so we are mean) ..and working on the theory that we could quickly learn enough about CSS, DHTML, Javascript, DOMs and SSI (how naive are these guys) we decided on the following technical strategy:

A Word to the Wise

So sometime later a much chastened couple of guys knew a lot more about a number of technologies ...

To summarise the experience:

Positive

However, if you must use an off-the-shelf solution, don't care about the overhead, or have no control over the server side then have no fears about the quality of the available choices. They are very good and getting better.

Negative

Are there down-sides or limitations in our approach?

So in the spirit that "opening the kimono is good for the soul" (eh!) this is what we did ...and learned...mostly painfully.

Apache Configuration and Browser detection

Cross Browser DHTML, CSS and Javascript (Jscript)



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

RSS Feed Icon

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

Share Page

share page via facebook tweet this page submit page to stumbleupon submit page to reddit.com

Page Features

Page comment feature Send to a friend feature print this page Decrease font size Increase font size

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
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 Techniques
CSS Short Cuts
CSS overview
Oh Really!

Javascript

ECMA-262

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: September 15 2013.