Documentation

1. Description

Tree menu is a customized menu rendering which you can use in your sites. All Items are clickable and hovered. This allows you to build a convenient and good looking navigation for your site.

The picture below shows an example of a Tree menu:

Please refer to the XSL section for more information about XSL renderings.

2. Installation Guide

The XSL Tree menu rendering is distributed as a standard Sitecore package. Thus 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 references to JavaScrpt files named treecontrol.js and menutools.js to your layout (this file contains functions for the tree and menu control logic). The file is located here:
Sitecore modules/OpenSource/scripts/.

Thus the links should look like this:

3. User Manual

The Tree menu is an XSL rendering. Thus you can work with it like with any other XSL rendering.

The Tree menu XSL rendering is controlled via a number of parameters.

Open the Parameters tab of the rendering to set rendering properties (double-click on the rendering) and set properties as described in the example below.

You can also define the properties in the xslSimpleMenu rendering (see the  section in the rendering’s source code).

4. Valid parameters

Name	Description	Default	Note
source_node	The path to the source Item for the menu	‘/sitecore/content/Home’	path ‘/sitecore/content/Home’ means that the tree will contain Items, which are the Home node’s children . You can exchange this path into another valid path depending on your purpose
template	The list of templates separated by exclamation marks. The tree will consist of Items based on one of the templates form this list	‘’	All the Items will be included into the tree by default (when this parameter is not specified). Every template should be separated with exclamation marks preceding and following it (for example, !mainmenuitemtemplate!)
fieldTitle	Title to display	‘Title’	If the field doesn’t exist, the node’s name will be shown
expand_image	The path to the image which will be shown as an expand image for the tree	‘/sitecore/shell/Themes/Standard/ Images/expand9x9.gif’
collapse_image	The path to the image which will be shown as a collapse image for the tree	‘/sitecore/shell/Themes/Standard/ Images/collapse9x9.gif’
pickerImage_width	The width of the expand/collapse image	‘9px’
pickerImage_height	The height of the expand/collapse image	9px
tab_length	The length from the expand/collapse tree image to the Item Image or Text	1px
Expand_itemImage	The path to the image which will be shown for the selected node	'/sitecore/shell/Themes/Standard/ Applications/16x16/folder_closed.png'
collapse_itemImage	The path to the image which will be shown for the deselected node	'/sitecore/shell/Themes/Standard/ Applications/16x16/folder.png'
show_itemImage	The flag to show/hide the Image near the Items	‘0’	‘0’ – hide ‘1’ – show
use_appearance	The Flag to use appearance or setup images as the Image near the Item's name.	‘0’	‘0’ – collapse_itemImage and expand_itemImage will be used as an Item’s image ‘1’ – an image from the appearance section will be used for the Item
itemImage_width	The width for the Item’s image	‘16px’
itemImage_height	The height for the Item’s image	‘16px’
item_width	The width of the Item’s title	‘100%’
Item_height	The height of the Item’s title	‘1px’
item_maxLength	The Maximum length of the Item’s title (in characters)	‘0’	‘0’ – unlimited count of characters ‘n’ – n characters will be shown with the ‘…’ string at the end. If the mouseover event for the truncated Item fires, the customized tooltip will be shown
treeBorder_class	The CSS class for the tree border	‘’
levelItem_class	The CSS class for the tree’s Items	‘’
levelItem_hover	The CSS class for the hovered Item	‘’
levelItem_clicked	The CSS class for the clicked Item	‘’
pickerImage_style	The CSS class for the expand/collapse image	‘’
itemImage_style	The CSS class for Image near the Item	‘’
pickerImageHover_style	THe CSS class for the expand/collapse image	‘’
tooltip_class	The CSS class for the customized tooltip	‘’
tooltipCaption_class	The CSS class for the tooltip’s caption	‘’
tooltipText_class	The CSS class for the tooltip’s text	‘’
show_effect	The number of the effect which will be applied to the expand menu	‘0’	‘0’ – no effect. ‘n’ – see the table bellow
show_duration	The play effect’s duration in seconds	‘0.5’
show_tooltip	The flag which indicates whether to show the tool tip or not	‘0’	‘1’ - show

Table of effects:

Effect number	Description
0	No effect
1	Reveal from inside out
2	Scroll in from outer parts
3	Scroll out from the 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 pixels
13	Scroll in from outer parts
14	Scroll out from the center
15	Close from both the top and bottom
16	Open from the center to top and bottom
17	Diagonal roll from right to left
18	Different angle diagonal roll from 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
The cycle appears to start again after this...

5. Sample style sheet

.tree_border {vertical-align: middle;padding: 0px;background-color:Transparent;width:150px;height:1px;position:relative;display:inline;}

.tree_level {color:Maroon;background-color:Transparent;padding: 3px 2px 0px 2px;vertical-align: middle;text-align:left;font-size:16px;font-weight:bold;cursor:default;}

.tree_level_hover {color:Red;background-color:Transparent;padding: 3px 2px 0px 2px;vertical-align: middle;font-size:16px;font-weight:bold;text-decoration:underline;cursor:hand;}

.tree_level_clicked {color:Red;background-color:Transparent;padding: 3px 2px 0px 2px;vertical-align: middle;font-size:16px;font-weight:bold;text-decoration:underline;cursor:default;}

.tooltip {color:Black;background-color:Yellow;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;visibility:hidden;position:absolute;}

.tooltip_caption {background-color:Yellow;vertical-align:middle;text-align:left;font-size:12px;font-weight:bold;}

.tooltip_text {background-color:Yellow;vertical-align: middle;text-align:left;font-size:11px;font-weight:normal;}

.imagePicker_style {color:White;}

.imagePickerHover_style {cursor:hand;}