Support > Documentation > Plug-in Web Applications > Menus > DMenu

DMenu

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))

Topics

google (5 items)
RSS (3 items)
SEO (3 items)
plug-in modules (28 items)
IT (9 items)
best practices (5 items)
visual tutorial (29 items)
security (3 items)
data handling (7 items)
fundamentals (3 items)
graphic design (19 items)
web protocols (9 items)
programming (48 items)
html formatting (7 items)
POD (32 items)