DHTML Menus
Ektron CMS400.NET’s Menu feature lets users create and maintain a dropdown menu system for your Web site. The Menu feature lets you display menu options that link to content blocks, library assets, external hyperlinks and submenus.
To learn more about menus, see Working with Menus.
Additional Documentation in Ektron Knowledge Base
This chapter explains how to implement standard menus that ship with Ektron CMS400.NET. Ektron’s Web site also provides Knowledge Base articles that explain how to extend the standard menu features.
Displaying a Menu on a Web Page
GenerateMenu and DropMenu
Warning! The menu functions described below are only one example of how to implement menus. The scripts reside in the Application API file. You can implement your own menu system using JavaScript.
Use the GenerateNextGenMenu and DropNextGenMenu custom functions to display a DHTML menu on a Web page. Place GenerateNextGenMenu once on the page to provide an infrastructure for DropNextGenMenu. Then, place DropNextGenMenu as needed to implement individual menus.
Follow these steps to display a menu on a Web template.
1. Place the following code directly after the page’s <body> tag.
<%=(ecmDHTML_GenerateNextGenMenu("menu id number"))%>
For example:
<%=(ecmDHTML_GenerateNextGenMenu("1"))%>
To display more than one menu, separate each id number with a comma. For example:
<%=(ecmDHTML_GenerateNextGenMenu("1,2,3"))%>
2. If the user clicks text to display the menu, place the following code within the template file where the text would appear.
<%= ecmDHTML_DropNextGenMenu(menu id number,"text user clicks to display menu")%>
For example:
<%= ecmDHTML_DropNextGenMenu(1,"Products")%>
If the user clicks a graphic to invoke the menu, use this syntax:
<%= ecmDHTML_DropNextGenMenu(menu id number,'<img src=graphic file name>')%>
For example:
<%= ecmDHTML_DropNextGenMenu(1,'<img src=mymenugraphic.jpg>')%>
Displaying Menus in a Multi-language System
If your Web site supports multiple languages, and the user selects a language before viewing the menu, if an edition of the menu is available in that language, it appears. If not, nothing appears.
For more information, see ”Working with Menus in a Multi-Language System” on page 1423.
Customizing the Menu’s Appearance
You can customize a menu’s appearance, such as the font style, color, and size. So, you have the flexibility to coordinate a menu with the design your Web site.
To customize a menu in Ektron CMS400.NET, you can change the ek_menu.js file. See Also: ek_Menu.js
ek_Menu.js
You can change the look and feel of a menu by changing the ek_menu.js file. If you used the default settings when installing Ektron CMS400.NET, this file is in webroot/siteroot/Workarea/java/.
Use the following table to help you change menu attributes.
|
Attribute name |
Specifies the |
Default value |
|
fontSize |
Size of menu text |
14 |
|
fontWeight |
Thickness of menu text You can set FontWeight by name (Bold or Plain) or value. Values range from 0 -1000. |
Plain |
|
fontFamily |
Font style of menu text See Also: FontFamily |
arial,helvetica,espy, sans-serif |
|
fontColor |
Color of menu text Note: When changing the color, you can specify the color name or code. |
#000000 |
|
fontColorHiLite |
Color of text when menu item is highlighted |
#ffffff |
|
bgColor |
Color of border between menu items |
#555555 |
|
menuBorder |
Width (in pixels) of border around main menu |
1 |
|
menuItemBorder |
Width (in pixels) of border around each menu item |
1 |
|
menuItemBgColor |
Background color of menu items |
#6699ff |
|
menuLiteBgColor |
Color of main menu border highlight See Also: menuLiteBgColor |
|
|
menuBorderBgColor |
Color of the main menu border |
#6699ff |
|
menuHiLiteBgColor |
Background color of highlighted menu item |
#000084 |
|
menuContainerBgColor |
Background color of the container Note: The container is like a <div> tag that displays the menu. When you set the container color, it appears at the top and left side of the menu frame only. |
|
|
childMenuIcon |
Path to the submenu icon (the image used to indicate that a submenu is available from this menu item).
To display a different image, either provide an external path to it or upload the image to Ektron CMS400.NET then provide a local path. |
./Workarea/images/ application/arrows.gif |
|
childMenuIconHiLite |
The path to the icon that appears when you hover the mouse over a menu item that leads to a submenu. To display a different image, either provide an external path to it or upload the image to Ektron CMS400.NET then provide a local path. |
./Workarea/images/ application/arrows2.gif |
FontFamily
Use the fontFamily attribute to specify the menu font. It must be supported by the browser.
You can assign to this property several, comma-separated values.
Note: To display a font family other than the browser default, specify only the font name and no other comma-separated values. If you specify more than one value for the font family, Ektron CMS400.NET uses the default IE settings.
menuLiteBgColor
Example
