Print
1. Description
DHTML menu is an advanced menu rendering. It consists of the main menu bar with drop-down menus. The main bar is populated by content Items of the same level and drop-down menus – by the children of appropriate Items.
It is possible to add icons to the menu Items and apply effects to menus as they expand.
All Items are clickable and hovered. The menu loads dynamically and is not present in the source code of the page, so your pages will be quite light-weighted with DHTML menu. This allows you to build a convenient and good looking navigation for your site.
Please refer to the XSL section for more information about XSL renderings.
2. Installation Guide
XSL DHTML menu rendering is distributed as a standard Sitecore package; hence in order to start using it, you should install the package. Please refer to the ' Installing Modules and Packages' article if you are not familiar with the standard Sitecore Packager tool.
After the package installation, you will see the XSL menu control in the list of XSL renderings. Thus you will be able to place it on a (sub)layout or tie via placeholder like any usual rendering.
In order to use this control, you should add the references to JavaScrpt files named DHTMLMenuControl.js and menutools.js to your layout. The files are located in the following folder:
Sitecore modules/OpenSource/scripts/.
The links at your page should look like this:
<script language="javascript" src="/SdnArchive/sitecore modules/OpenSource/scripts/menutools.js" type="text/javascript"> </script>
<script language="javascript" src="/SdnArchive/sitecore modules/OpenSource/scripts/DHTMLMenuControl.js" type="text/javascript"> </script>
3. User Manual
DHTML menu is an XSL rendering, thus you can work with it like with any other rendering.
Example:
- Create a template containing two fields for menu Items :
Title
Type: text
Defines the text for a menu Item
Image
Type: image
Defines the image for a menu Item
- Create a template for the divider. This template should be called Divider and should not contain any data fields.
- Create a tree structure for DHTML menu under the DHTML Menu Sample Item (this Item may be based on any template):
Items in the structure should be based on the DHTML Menu Template; The divider Item should be based on the Divider template (this Item will represent a divider in the menu). Fill the content of the Items. - Place a placeholder on a layout, tie up the DHTML menu rendering to this placeholder and set appropriate properties.
To set rendering properties, double-click on it and you’ll see the configuration window. Open the Parameters tab and set the properties:
- Add references to JavaScrpt to your layout.
The files are located here:
Sitecore modules/OpenSource/scripts/.
The links should look like this:
<script language="javascript" src="/SdnArchive/sitecore modules/OpenSource/scripts/menutools.js" type="text/javascript"> </script>
<script language="javascript" src="/SdnArchive/sitecore modules/OpenSource/scripts/DHTMLMenuControl.js" type="text/javascript"> </script>
As a result of the steps above, you should see the rendered menu on the front-end.
4. Valid Rendering Properties
horizontalMainMenu_class
Parameter value:
The Css class name for the horizontal menu.
Example:
.mainmenu{
color: #E5F0FE;
background-color: #5F8AC5;
padding: 3px 2px 0px 2px;
vertical-align: middle;
border-top: 1px #5F8AC5 solid;
border-bottom: 1px #5F8AC5 solid;
border-left: 1px #5F8AC5 solid;
border-right: 1px #5F8AC5 solid;
font-size:16px;
font-weight:bold;
}
horizontalMenuBorder_class
Parameter value:
The Css class name for the horizontal menu Border.
Example:
.menu_border
{
background : #5F8AC5;
color: #5F8AC5;
border-top-color : #304767;
border-top-style : solid;
border-top-width : 1px;
border-bottom-color : #304767;
border-bottom-style : solid;
border-bottom-width : 1px;
border-right-color : #304767;
border-right-style : solid;
border-right-width : 1px;
border-left-color : #304767;
border-left-style : solid;
border-left-width : 1px;
vertical-align: middle;
padding: 0px;
}
horizontalMenuHover_class
Parameter value:
The Css class name for the horizontal menu Hover Item.
Example:
.menu_hover {
color: #E5F0FE;
background-color: #4A6B99;
padding: 3px 2px 0px 2px;
vertical-align: middle;
border-top: 1px white solid;
border-bottom: 1px white solid;
border-left: 1px white solid;
border-right: 1px white solid;
cursor:hand;
font-size:16px;
font-weight:bold;
}
horizontalMenuClick_class
Parameter value:
The Css class name for the horizontal menu Clicked Item.
horizontalDivider_class
Parameter value:
The Css class name for the dividers in the horizontal menu. If the value of this property is empty, the divider is not shown.
horizontalDividerimage_class
Parameter value:
The Css class name for the divider image in the horizontal menu.
horizontalDividerimage_path
Parameter value:
The Url path to the divider image.
DHTMLMenuBorder_class
Parameter value:
The Css class name for the vertical menu border.
Example:
.DHTMLMenu_border
{
background-color:White;
border-top-color : #304767;
border-top-style : solid;
border-top-width : 1px;
border-bottom-color : #304767;
border-bottom-style : solid;
border-bottom-width : 1px;
border-right-color : #304767;
border-right-style : solid;
border-right-width : 1px;
border-left-color : #304767;
border-left-style : solid;
border-left-width : 1px;
vertical-align: middle;
padding: 0px;
text-align:left;
}
DHTMLMenuItem_class
Parameter value:
The Css class name for the vertical menu Item.
Example:
.DHTMLMenu_item
{
border: 1px;
padding: 0px;
color:Black;
font-family:Arial;
font-weight:bold;
font-size:x-small;
border-top-color : White;
border-top-style : solid;
border-top-width : 1px;
border-bottom-color : White;
border-bottom-style : solid;
border-bottom-width : 1px;
text-align:center;
width:100%;
}
DHTMLMenuItemHover_class
Parameter value:
The Css class name for the vertical menu hovered Item.
Example:
.DHTMLMenu_hover_item
{
border: 0px;
padding: 0px;
color:Black;
font-family:Arial;
font-weight:bold;
font-size:x-small;
border-top-color : #304767;
border-top-style : solid;
border-top-width : 0px;
border-bottom-color : #304767;
border-bottom-style : solid;
border-bottom-width : 0px;
text-align:left;
text-decoration:'underline';
}
DHTMLMenuImages_class
Parameter value:
THe Css class name for the vertical menu images.
Example:
.DHTMLMenuImages_class
{
width:16px;
height:16px;
}
DHTMLMenuDivider_class
Property value:
The Css class name for the vertical menu dividers.
linkedMenu
Parameter value:
If set to “true”, every menu Item will be rendered as a link. See the example below.
This can be useful when it is required to open pages in new windows (standard DHTML menu cannot open links in new windows).
The default value is “false”.
DHTMLMenuImageField
Parameter value:
The name of the field which contains the image. The field should be present in the rendered Item. If the field is not set or does not exist, the image won’t be shown.
DHTMLMenuShowImages
Parameter value:
If set to “true”, the vertical menu will show the images near the menu Item titles.
The default value is “false”.
DHTMLDividerImagePath
Parameter value:
THe Url path to the divider image for the vertical menu. If this property is empty, a line will be rendered as the menu divider.
source_node
Parameter value:
The Sitecore path to the source Item. Default is “/sitecore/content/Home”
template
Parameter value:
The list of templates separated by exclamation marks. The menu will consist of Items based on one of the templates form this list. If this parameter is not specified, all the Items will be included in the menu by default. Every template should be separated by exclamation marks which precede and follow it (for example, !mainmenuitemtemplate!document!)
dividerTemplate
Parameter value:
The list of templates separated by exclamation marks (the same form as that of the template property above). Items based on one of the templates from this list will be shown as a divider.
fieldTitle
Parameter value:
A field to display in the menu.
Note:
The field with the name ‘Title’ will be displayed by default. If the field with this name is not found, the name of the Item will be shown.
DHTMLFirstLevelFilterTransition
Parameter value:
The number of the effect which will be applied to the first level of the DHTML menu as it is expanded.
The default value is 0 – no effect.
DHTMLFirstLevelFilterDuration
Parameter value:
The play duration of the effect for the first level of the DHTML menu (in seconds). The default value is 0.3.
DHTMLFilterTransition
Parameter value:
The number of the effect which will be applied to the expanding DHTML menu (all levels after the first one). The default value is 0 – no effect.
DHTMLFilterDuration
Parameter value:
The play duration of the effect for the DHTML menu (in seconds). The default value is 0.3.
Table of effects:
|
Effect number |
Description |
|
0 |
No effect |
|
1 |
Reveal from inside out |
|
2 |
Scroll in from outer parts |
|
3 |
Scroll out from center |
|
4 |
Scroll up from button |
|
5 |
Scroll down from top |
|
6 |
Scroll left to right |
|
7 |
Scroll right to left |
|
8 |
Vertical Blinds left to right |
|
9 |
Horizontal Blinds top to bottom |
|
10 |
Combination of 8 and 9 |
|
11 |
Looks a lot like 8 |
|
12 |
Comes in in pixels |
|
13 |
Scroll in from outer parts |
|
14 |
Scroll out from center |
|
15 |
Close from both top and bottom |
|
16 |
Open from center to top and bottom |
|
17 |
Diagonal roll from right to left |
|
18 |
Different angle diagonal roll right to left |
|
19 |
Number 17: the other way |
|
20 |
Number 18: the other way |
|
21 |
Random horizontal lines |
|
22 |
Random vertical lines |
|
23 |
Completely Random |
|
Cycle appears to start again after this... |
|