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 https://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.