Ektron CMS400.Net Reference

>>Helping Users Navigate Your Web Site > Working with Menus > DhtmlMenu Server Control

DhtmlMenu Server Control

Note: For optimal performance, Ektron recommends using at minimum Internet Explorer 5.5 or Mozilla Firefox 1.0. Also, the following KB article describes a possible problem using a DHMTL menu with Internet Explorer 8: http://dev.ektron.com/kb_article.aspx?id=26942.

The DhtmlMenu server control lets you display a menu with drop down boxes and submenus. This lets developers add a menu to a page without taking up a lot space. You can modify the menu’s style properties via a style sheet.

Before using the DhtmlMenu server control, you must create menus in the Ektron CMS400.NET workarea. See Working with Menus.

The DhtmlMenu server control also lets logged in users add content to a menu. When you are logged in to your Ektron CMS400.NET site, two items are added to each menu: Add and Edit Menu. Use them to add a new menu item or edit an existing one. See example below.

For information on a adding a menu item, see Adding New Content to a Menu via Navigation Link on a Web Page.

For information on a editing a menu, see Editing a Menu's Properties via Navigation Link on a Web Page.

Important: You cannot create a DHTML menu using code behind -- you must drag and drop it. Once a DHTML menu is on a Web form, you can manipulate its properties using the code behind.

See Also: Contrasting Menu Server Controls

DhtmlMenu Server Control Properties

The DhtmlMenu server control properties are described in this table.

Note: The following table only lists Ektron-specific properties. It does not describe native .NET properties such as font, height, width and border style. For documentation of these properties, see Visual Studio help.

Property

Value

Data Type

Align

Specifies the horizontal alignment of
the root menu text.

The default is Center.

NotSet - Use the default setting.

Left - Aligns text to the left.

Center - Aligns text to the center.

Right - Aligns text to the right.

Justify - Aligns text justified to both margins.

HorizontalAlign

Authenticated

Indicates if you are logged in to the CMS Explorer
and can use it to browse to Content, Collections, etc.

See Also:  Using CMS Explorer to Browse Your Ektron CMS400.NET Site

String

CssClass

Apply a .css class to the root menu. Enter the class name from the .css defined in the Stylesheet property. See Also: Stylesheet

Since pop_style.css is the default style sheet, you can use its classes without defining it in the Stylesheet property.

For example, if you enter lowtext in the property, the root menu changes as shown below.

String

DefaultMenuID

The ID of a menu that appears where you inserted this server control if no other menu is identified or is available.

If you don’t know the ID number of the menu, use the CMS Explorer to browse to it. See Also: Using CMS Explorer to Browse Your Ektron CMS400.NET Site

Long

 

DoInitFill

By default, Fill occurs during the Page_Init event. Set to false if you want to postpone the fill-action until later. In this case, FIll is automatically called during the Page Render event.

You might do this if you need to set or change a property on the control in codebehind and have it render with your changes shown.

Boolean

DynamicParameter

Select menu_id. When you do, this server control uses the menu passed as a URL parameter.

String

EnableIE6FormsFix

This should only be enabled when you have a DHTML menu rendering over an HTML select element. In IE6, the DHTML renders below the drop down. This temporarily disables the element when the DHTML Menu is rendered.

Boolean

Hide

Used to hide a menu in design time and run time.

True = Hide menu

False = Show menu

Boolean

HorizontalDisplay

Displays submenu to the right of the root menu. This only affects the first submenu of the root menu. All subsequent submenus appear to the right of each submenu.

The default is False

True = Submenu appears to the right of the root menu

False = Submenu appears below the root menu

Boolean

Language

Set a language for viewing Dhtml Menus. This property shows results in design-time (in Visual Studio) and at run-time (in a browser).

For more information, seeWorking with Menus in a Multi-Language System

Integer

MenuHoverOverColor

Sets the background color for the root menu when hovering over it.

Color

MenuStyle

A specified inline style that defines the root menu. For example:

font: bold 18px Arial;color:royalblue; background-color:slateblue

String

Stylesheet

Specify the location and style sheet for the submenu. For example: \Workarea\csslib\mytest.css.

Leave blank to use the default.

pop_style.css is the default style sheet. It is located in \siteroot\Workarea\csslib. For more information on style sheets, see Using a Style Sheet.

You can use the Stylesheet property in conjunction with the CssClass property to define the root menu.

See Also: CssClass

String

SubMenuBackColor

Sets the background color for the submenu.

Color

SubMenuHoverOverColor

Sets the background color for the submenu when the cursor hovers over it.

Color

SubMenuItemHeight

Sets the height of each submenu item in pixels. The default is 20.

Example set to 20:

Example set to 30:

Int16

SubMenuItemWidth

Sets the width of each submenu item in pixels. The Default is 150

Example set to 150:

Example set to 130:

Int16

SubMenuTopOffset

Sets the location of the top of the submenu relative to its parent. This number, in pixels, refers to the number of pixels the submenu appears below the parent menu. The default is 5.

Example set to 5:

Example set to 0 (zero):

Example set to -10:

Int16

SuppressAddEdit

When set to True, suppress the Add and Edit buttons on the menu when a user is logged in to Ektron CMS400.NET. The default is False.

True - suppress the Add and Edit button when a user is logged in to Ektron CMS400.NET.

False - show the Add and Edit buttons when a user is logged in to Ektron CMS400.NET.

Boolean

SuppressWrapperTags

Suppresses the output of the span/div tags around the control. The default is False.

True - Suppress wrap tags.

False - Allow wrap tags.

Boolean

WrapTag

Allows a developer to specify a server control’s tag.

The default is Span.

Span - The <span> tag is used to designate an inline portion of an HTML document as a span element.

Div - The <div> tag is used when you want to apply attributes to a block of code.

Custom - Allows you to use a custom tag.

String

Using a Style Sheet

You can create your own style sheet, or modify the existing default one, pop_style.css. It is located in \site root\Workarea\csslib.See Also: pop_style.css

Style Sheets let you choose different text colors, text alignment, text fonts, and text size to create a customized menu.

Best Practice

Ektron recommends copying and renaming the default style sheet. This insures you always have a clean file to start with. This also gives you something to reference if you are not getting the results you expect.

The style sheet must be located below the site root.

You can only define one menu style sheet for each Web page. If you have more than one menu on a single Web page, they share a style sheet.

For more information on style sheets, visit http://www.w3.org/Style/CSS/.

pop_style.css

This file is located in webroot/siteroot/Workarea/csslib. It is used to customize the look of the DhtmlMenu server control. The following is a list of style sheet properties that can be modified.

Style Class

Description

Attribute

Default Value

.lowText

Text of the floating menu as displayed on the menu.

color

font

text-align

text-decoration

#000000 (Black)

12px Arial, sans-serif

left

none

.highText

Text of the floating menu when highlighted.

color

font

text-align

text-decoration

#000000 (Black)

12px Arial, sans-serif

left

none

.roothighText

Note: This class only
works when called by the CssClass
property. Use the Font property
in the Appearance category
to define root menu text.

Text of the root menu as displayed on a Web page.

color

font

text-align

text-decoration

#000000 (Black)

16px Arial, sans-serif

center

none

.itemBorder

Border color and size of the menu.

border

1px solid #666666

.itemBorderBlank

Separator border color and size of the menu.

border

1px solid #CCCCDD

Formatting the DhtmlMenu Server Control

Additional information on formatting the DhtmlMenu server control can be found in the following Knowledge Base article: http://dev.ektron.com/kb_article.aspx?id=2441

Retrieving the XML Structure of a DhtmlMenu

Retrieving the XML structure of XML content allows for greater control over developing XSLs. The following is an example of how to retrieve the XML structure:

1. Open a new Web form.

2. Drag and drop a ContentList server control onto it.

3. Set the DhtmlMenuID property.

4. Drag and drop a Textbox on the Web form.

5. Set the TextMode property to MultiLine.

Note: Ektron recommends setting the text box width to at least 400px.

6. On the code behind page, add the following line.

Textbox1.Text = DhtmlMenu1.XmlDoc.InnerXml

7. Build the project.

8. View the Web form in a browser.

The XML structure of the DhtmlMenu appears in the textbox.


Visit the Ektron Dev Center at http://dev.ektron.com 1-866 - 4 - EKTRON

Ektron CMS400.NET Reference Version 8.02 SP1 Rev 1

Ektron Documentation,© 2011 Ektron, Inc.