Paul's Web Design Pages issue 137 (March 98)

Structured menus this month, just like the ones at PC Plus Online, Microsoft's Internet Client SDK and IE4's own Explorer Bar. I've picked up some good JavaScript programming tips along the way, but also found that achieving 'graceful degrading' compatibility with Navigator 4.0 is not an easy business. Paul Stephens.

PLUS - sample pictures from the Agfa Photo 1280 digital camera reviewed in Brief Encounters this month. Click here to see them.

MyMenu.gif (22160 bytes)Structured menus, with detail sections which expand and contract as you click on their headers, are definitely the top Web site fashion accessory of the moment. In this month's Publish and Be... I've worked out how to create them in Dynamic HTML for Internet Explorer 4.0.

Along the way I also discovered some useful tips, such as how to write JavaScript routines which can manipulate any object you throw at them, and how to use custom properties to store information about individual objects. I also discovered that, while making IE4 DHTML pages compatible with older browsers is relatively easy, making them compatible with Netscape Navigator 4.0 is much harder - mainly because of Netscape's own, semi-compatible version of DHTML!

Below are links to this month's example Web pages. Except for the third one ("Cross-browser compatible..) they only work properly in Internet Explorer 4.0, but you can load them into any other browser to see what happens. You can also view their source code in most browsers by choosing View..Source from the browser's menus (Tip - to view the source of a frame-based document, right-click in the frame and choose View Source from the pop-up menu).

First attempt - sections toggle open/closed, multiple sections open at once.

'Advanced' version - heading change colour under mouse pointer, current section auto-closes when another one is opened.

Cross-bowser compatible version - runs in Navigator 4.0, IE 3.0 etc.

Custom properties demo - how a single routine can remember any object's original colour.

(Final tip - check the hyperlink (<a>) tags in the source of this page for a way of protecting IE4-only pages from access by non-IE4 browsers)

 Back to Paul's PC Pages