Expanding menu, in a frameset (persistent)

This demo uses one of the following configuration files:

expanding-multiple.js: Javascript configuration (for ASP config add <% %> instructions and rename)
expanding-multiple.ini: PHP configuration

And the following images:

orange-yellow-gradient.jpg (navbar item background)
orange-cream-gradient.jpg (navbar item rollover)
down-green.gif (navbar down-arrow)
down-red.gif (navbar down-arrow rollover)

Menu persistence is handled by the Snapshot Cookie extension (click open a few menus, and then hit "Refresh", and you should see your last selection persist, if you accept sessional cookies).

This demo also has the following additional CSS - to reposition the menus, and to progressively reduce the width of nested levels, using the simplified box model hack to feed different widths to IE5. The ID-selector and extensive use of !important rules is so that they have enough specificity to override the menus' default styling:

Skip code example

/* expanding menu styling */#udm ul {	margin-left:0 !important;	margin-top:1px !important;	width:128px !important;	w\idth:120px !important;	}#udm ul ul {	width:120px !important;	w\idth:112px !important;	border-style:dashed;	background-color:#ffe;	}#udm ul ul ul {	width:112px !important;	w\idth:104px !important;	border-style:dotted;	background-color:#ffd;	}/* give all anchors a hand cursor */#udm a {	cursor:pointer !important;	cursor:hand !important;	}

This configuration is not supported in Mac/IE5, because it doesn't support menus that open onclick.

For more information about this, please see Creating an expanding menu.