DMenu

posted on 11:45 AM, May 28, 2008

DMenu generates dynamic drop-down menus.

DMenu is a multi-purpose DHTML menu-builder for ExSite websites. It will create context-specific menus on any web page in a site. Context-specific means that the site navigation links will reflect the current location in the site.

DMenu builds horizontal menubar-style menus. The menubar items correspond to top-level pages on a website. If a page has a submenu (ie. child pages), then DMenu will pop-up a drop-down menu of the child pages to select from.

Usage

Usage is very simple. Place the DMenu plug-in at the point on the page at which the menubar should be inserted. No special options/parameters are required. The plain CMS tag will look like this:

<!--&DMenu()-->

DMenu will create a table with 100% width for the menubar, so the menubar will span the region into which it was placed. DMenu will also insert the necessary Javascript to work the DHTML menu effects. Javascript must be enabled to view the pop-up DHTML menus. Even without Javascript, the main menubar links will still work.

Customizing Menu Appearance

The menubar is constructed as a table, with width of 100%. The table, cells (TD elements) and menubar links are all of class ``menubar''.

The drop-down menus are encapsulated in DIV elements of class ``DMenu'', and the links are of class ``menu''.

If any of the links in the menubar or drop-down menus corresponds to the page being viewed, that link is given an ID of ``thispage''.

A template that uses DMenu to generate its menus must include style rules for these elements in order to get the full appearance of a menubar and drop-downs. Without any special style rules, only the text menu labels will be visible, whereas you typically want a distinct menubar, framed pop-up menus, and rollover effects.

Example Stylesheet

Here is a simple CSS example showing how you can obtain basic highlighting and rollover effects. The example uses a simple grey color scheme, but can in principle be extended with borders, image backgrounds, and other effects.

    /* give the menubar a solid color */
    td.menubar {
        background-color:#cccccc;
        padding:0px;
    }
    /* style the menubar links */
    a.menubar { 
        font-family:arial;
        font-size:10pt;
        text-decoration:none;
        padding:3px;
        color:#666666;
    }
    /* style the drop-down menu links */
    a.menu { 
        font-family:arial;
        font-size:10pt;
        text-decoration:none;
        padding:3px;
        color:#666666;
    }
    /* rollover effects for menubar and menu */
    a.menu:hover { 
        background-color:#eeeeee;
        color:#000000;
    }
    a.menubar:hover { 
        background-color:#eeeeee;
        color:#000000;
    }
    /* the drop-down menu box */
    .DMenu {
        background-color:#dddddd;
    }

Bugs

DMenu uses the CBE JavaScript tools from CrossBrowser.com to handle the dynamic HTML. The CBE tools do not appear to handle pure CSS layouts very well, and may fail to calculate where the menus should appear. The only reliable work-around is to use table-based layouts instead.

DMenu inserts some essential CSS into the page to ensure that basic functionality will be achieved. This is done with a <style> section inserted into the body of the document, which is technically invalid HTML. However, all major browsers support it.

Related Plug-ins

SimpleMenu

Graphic design

Template Tutorial (Article)
This article is a step-by-step introduction to creating web page templates in ExSite. -- 1. Create an HTML version of your web page design -- You can create your mock-up using any web design tools you... (posted 2:01 PM, September 17, 2010)

Menus (Article)
-- ExSite Manual - Menus -- This document describes the different techniques for managing site menus in the ExSite CMS. -- Contents -- * Dynamic Context-sensitive Menus * Horizontal Menu Bars using... (posted 11:13 AM, July 16, 2010)

Introduction on renaming/editing document or image folders (Article)
A short tutorial describing how to edit Document or Photo Album folders. (posted 11:59 AM, March 4, 2010)

How to add SEO Meta Tags to your website (Article)
A short tutorial describing how to add SEO tags to your website. (posted 1:51 PM, February 22, 2010)

How to add a Survey to your website (Article)
(posted 3:00 PM, November 13, 2009)

Using the HTML Editor (Article)
* Introduction * Style Guide * Finding your way around the editor * Entering Text * Copy-and-Paste Issues * Formatting Text * Unformatting Text * Entering Images * Making Hotlinks * Making... (posted 9:14 AM, October 8, 2009)

Website Manager Module (Article)
-- Introduction -- The website manager is the application that is used for: * managing (creating and deleting) sites * managing pages, templates, and content libraries * updating content (by editing... (posted 3:37 PM, October 2, 2009)

Feedback (Article)
Solicit email comments from your readers. (posted 3:11 PM, July 21, 2008)

CMS (Article)
Advanced Content Management (posted 2:32 PM, July 21, 2008)

PrintFriendly (Article)
Make a printer-friendly view of the page. (posted 1:29 PM, May 28, 2008)

Gallery (Article)
Displays a photo album as a thumbnail gallery. (posted 1:19 PM, May 28, 2008)

Google (Article)
Puts a Google search form into your site. (posted 12:32 PM, May 28, 2008)

DMenu (Article)
DMenu generates dynamic drop-down menus. (posted 11:45 AM, May 28, 2008)

SimpleMenu (Article)
SimpleMenu generates context-sensitive menus and site maps in various formats. (posted 11:18 AM, May 28, 2008)

How this site was designed in ExSite (Article)
The redesign of the ExSite Support Site offers up a good real-world example of how to set up and install a new graphic design completely from scratch. This provides a good review of some universal web... (posted 5:42 PM, April 21, 2008)

Editing Best Practices (Article)
When entering new content into your web site, certain practices are best followed to ensure you end up with professional-looking and maintainable results. -- DO NOT USE the font face, font size, and... (posted 2:34 AM, July 26, 2007)

Advanced Templating Concepts (Article)
-- Analyzing Page Structure -- Your page structure consists of numerous different elements that can be managed separately. Some are obviously separate, such as images and stylesheets, while others are... (posted 2:15 AM, July 26, 2007)

Creating Templates (Article)
-- Templating Basics -- A template is a model page, which defines how the content of real pages should be laid out, decorated (enhanced with colors and graphics), and typographically styled. A template... (posted 1:53 AM, July 26, 2007)

Graphic Design Best Practices (Article)
-- Page Structure -- A page is typically broken into several regions, each holding a block of content that is independent of the others. For example, a common page structure uses a 3-column layout,... (posted 1:26 AM, July 26, 2007)

Templating Best Practices (Article)
HTML and CSS can be combined in a myriad of ways. Some of these will be friendly to ExSite's CMS assumptions, and others will make content management difficult or inconsistent. This document guides ... (posted 12:46 AM, July 26, 2007)

How ExSite Creates Web Pages (Article)
This document describes, in moderate technical detail, how ExSite constructs web pages for display on client browsers. It is intended as a primer for technically-oriented graphic designers who will... (posted 7:55 PM, July 25, 2007)

RSS

Link