Article relates to
both classic and ASP.NET AJAX
June 18, 2008
Last modified by
The skinobject properties that help with this task are:
1. Using different CSS classes for different levels in the menu structure
Here is an sample menu definition from a skin file:
Notice the EnableLevelCss="True" and MaxLevelNumber="3" properties.
If set to true, EnableLevelCss will insert the level of the menuitem to the beginning of its CSS class. Works for ItemCssClass, ItemCssClassOver, ItemCssClassClicked, ItemCssClassDisabled. For example: if ItemCssClass = “menu_item” then the menu will use “Level0menu_item” for the root group of items, “Level1menu_item” for the level 1 items and so on.
If EnableLevelCss are set to True, MaxLevelNumber limits the number of levels that will use the modified CSS classes. If there are more levels after MaxLevelNumber, their CSS classes will be the default ones. For example when MaxLevelNumber = 3 and ItemCssClass = “menu_item” all items after level 3 will have their ItemCssClass set to “menu_item”, while all items below level 3 will have the ItemCssClass and the value of the level “Level0menu_item”,”Level1menu_item” etc.
Note: the CSS classes that apply to the selected items in RadMenu take precedence before the level CSS. Therefore if an item has ItemCssClass set to “Level0menu_item” and SelectedPathHeaderItemCss="Menu_PathMainItemOver", then when this item is selected its CSS class will be "Menu_PathMainItemOver" instead of "Level0menu_item"
Here is a sample from the CSS file that goes with this menu:
/* selected path classes*/
CSS classes that start with 0 will be applied to the main menu items. The ones that start with 1 will be applied to the children of the main menu items. The ones that start with 2 will be applied to the grandchildren of the main menu items. Since MaxLevelNumer is 3, and we have already listed those three levels, all other menu items (after level 3) will have the normal CSS class applied to them (Menu_Item). Here is a visual representation of the CSS classes:
2. Using different group CSS classes (Radmenu only) Similar to the EnableLevelCss, if you set EnableGroupLevelCss to "True", the level of the group will be added to the beginning of its CSS class. It affects the GroupCssClass property. For example: if GroupCssClass = “Menu_Group” then the menu will use “Level0Menu_Group” for the root group of items, “Level1menu_group” for the level 1 groups and so on. MaxLevelNumber also affects this property. In our example if it is set to "3" we have the following CSS classes applied to the menu groups:
3. Using different item CSS classes
If set to true, EnableItemCss applies to each item in the menu that is not in the root group. The item's CSS class will be changed according to the position of that item in the menu group. The first item is numbered 1, the second - 2 and so on. The number is appended in the end of the CSS classes ItemCssClass, ItemCssClassOver, ItemCssClassClicked, ItemCssClassDisabled. For example: if ItemCssClass = “menu_item” then the menu will use “menu_item1” for the first item, “menu_item2” for the second and so on. This property can be combined with EnableLevelCss (e.g. "Level0menu_item1", "Level0menu_item2", ...).
EnableRootItemCss works in the same way as EnableItemCss, however it affects only the main menu items (for example if you want to achieve something similar to the Inox menu theme).
The property MaxItemNumber is used to limit the amount of different CSS classes that you need to specify, if EnableItemCss or EnableRootItemCss are set to True. If there are more items after MaxItemNumber, their CSS classes will be the default ones. For example when MaxItemNumber = 3 and ItemCssClass = “menu_item” all items after the third one will have their ItemCssClass set to “menu_item”, while the first three will have the ItemCssClass and the order of the item - “menu_item1”,”menu_item2”, “menu_item3”.
Copyright © 2017, Progress Software Corporation and/or its subsidiaries or affiliates. All Rights Reserved.
Progress, Telerik, and certain product names used herein are trademarks or registered trademarks of Progress Software Corporation and/or one of its subsidiaries or affiliates in the U.S. and/or other countries. See Trademarks or appropriate markings.