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 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.
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.
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;
}