Pull Down Menu System

part of the ArsDigita Community System by Aurelius Prochazka

The Big Picture

Designing navigation methods is an integral part of creating the information architecture for a web site. It is one of the things that we usually have to write from scratch for each site we create using the ArsDigita Community System (ACS). As of February, 2000 the ACS provides only two navigation tools, content sections and context bars.

With this module you can define two traditional site navigation methods - the top navbar (e.g. http://ibm.com/ or http://cyranosciences.com/) and the left navbar (e.g. http://vg-8.com/). There are benefits to both methods, so often a site will use a combination (http://amazon.com/).

One of the most impressive looking pull down menu systems appears on the main page of Caltech's Career Development Center, but it is java and can cause Netscape (esp. on Linux) to die. Our system does just about as much as this does for a lot less overhead.

Setting Up the Menus

[ns/server/yourservername/acs/pdm]
; Flag to display the administration menu bar
MenuOnAdminPagesP=1
; Flag to display the default menu bar on non-/admin pages
MenuOnUserPagesP=0

Our Data Model

create table pdm_menus (
	menu_id			integer primary key,
	-- programmer friendly title used to call the menu
	menu_key			varchar(20) unique not null,
	-- is this the menu to show if no pdm_key is passed to ad_pdm?
	default_p		char(1) default 'f' check (default_p in ('t','f')),
	-- orientation of the menu, either "horizontal" or "vertical"
	orientation		varchar(20) not null check (orientation in ('horizontal','vertical')),
	-- distance from the left side of the display area
	x_offset		integer not null,
	-- distance from top of the display area
	y_offset		integer not null,
	-- dimensions of a single menu element
	element_height		integer not null,
	element_width		integer not null,
	-- css-type style guides for the fonts in the menu
	main_menu_font_style	varchar(4000),
	sub_menu_font_style	varchar(4000),
	sub_sub_menu_font_style varchar(4000),
	-- main menu background images and background colors 
	main_menu_bg_img_url	varchar(200),
	main_menu_bg_color	varchar(12),
	-- hl stands for "highlight" - these are what are shown when
	-- someone mouses over the menu
	main_menu_hl_img_url    varchar(200),
	main_menu_hl_color	varchar(12),
	-- background and color definitions for first level sub menu
	sub_menu_bg_img_url	varchar(200),
	sub_menu_bg_color	varchar(12),
	sub_menu_hl_img_url	varchar(200),
	sub_menu_hl_color	varchar(12),
	-- background and color definitions for second level sub menu
	sub_sub_menu_bg_img_url	varchar(200),
	sub_sub_menu_bg_color	varchar(12),
	sub_sub_menu_hl_img_url	varchar(200),
	sub_sub_menu_hl_color	varchar(12)
);

create table pdm_menu_items (
	item_id			integer primary key,
	menu_id			references pdm_menus,
	-- within one level, sort_key defines the order of the items
	sort_key		varchar(50) not null,
	-- text of the item to be displayed if no images are shown and
	-- as alt text to the images
	label			varchar(200) not null,
	-- url may be null if this item is only used to store other items
	url			varchar(500),
	-- don't show certain elements to people who haven't registered
	requires_registration_p char(1) default 'f' check (requires_registration_p in ('t','f'))
);

Limitations and known bugs

The main bugs are that the sidebar is lacking compared to the horizontal menu and that the output is not compatible with versions of Netscape 3.0 or Internet Explorer 3.0 (or earlier).

Netscape does not correctly place form elements on layers. THe best way to deal with this problem is to try to place the pull-down in a place where it won't interact much with forms. For instance, the menu bar could be at the top of a header image and only ever overlay the header.

If a top-level menu item has no children, a javascript error will occur on mouse-over.

Future enhancements

Need to improve the side bar version and user and programming documentation. There has also been the following suggestions: which are being looked into.
aure@arsdigita.com