To change the menu appearance, you may sometimes need to go beyond the exposed appearance properties and change the CSS file that represents the skin. Therefore, it is important to understand the HTML structure of the menu.
The easiest way to demonstrate what goes on is by example.
The ASP.NET definition
Below is a simple menu definition:
- The menu has three items.
- The first two items have two children each.
- The last item is disabled.
| |
 Copy Code |
|
<rad:RadMenu runat="server" ID="RadMenu1" Skin="Outlook">
<Items>
<rad:RadMenuItem Text="Root Item 1" NavigateUrl="~/Page1.aspx">
<Items>
<rad:RadMenuItem Text="Child Item 1" NavigateUrl="~/Page11.aspx" />
<rad:RadMenuItem Text="Child Item 2" NavigateUrl="~/Page12.aspx" />
</Items>
</rad:RadMenuItem>
<rad:RadMenuItem Text="Root Item 2" NavigateUrl="~/Page2.aspx">
<Items>
<rad:RadMenuItem Text="Child Item 1" NavigateUrl="~/Page21.aspx" />
<rad:RadMenuItem Text="Child Item 2" NavigateUrl="~/Page22.aspx" />
</Items>
</rad:RadMenuItem>
<rad:RadMenuItem Enabled="False" Text="Root Item 3" NavigateUrl="~/Page3.aspx" />
</Items>
</rad:RadMenu> |
Rendered HTML output
When rendered, the definition produces the output listed below.
 |
Some parts of the markup - which are not related to the final presentation - have been removed (e.g. element ID attributes, JavaScript initialization code etc.) |
| |
Copy Code |
|
<div id="RadMenu1" class="radmenu RadMenu_Outlook ">
<ul class="horizontal rootGroup">
<li class="item first">
<a href="/NET2/Page1.aspx" class="link"><span class="text">Root Item 1</span></a>
<div class="slide">
<ul class="vertical group level1">
<li class="item first">
<a href="/NET2/Page11.aspx" class="link"><span class="text">Child Item 1</span></a>
</li>
<li class="item last">
<a href="/NET2/Page12.aspx" class="link"><span class="text">Child Item 2</span></a>
</li>
</ul>
</div>
</li>
<li class="item">
<a href="/NET2/Page2.aspx" class="link"><span class="text">Root Item 2</span></a>
<div class="slide">
<ul class="vertical group level1">
<li class="item first">
<a href="/NET2/Page21.aspx" class="link"><span class="text">Child Item 1</span></a>
</li>
<li class="item last">
<a href="/NET2/Page22.aspx" class="link"><span class="text">Child Item 2</span></a>
</li>
</ul>
</div>
</li>
<li class="item last">
<a href="/NET2/Page3.aspx" disabled="disabled" class="link disabled"><span class="text">Root Item 3</span></a>
</li>
</ul>
</div> |
The control is rendered as a DIV element, and the item hierarchy is presented as nested unordered lists with links inside. This, by far, is the most natural and semantic way to represent a navigation element with the existing HTML tags toolbox.
Here is a more detailed breakdown of the rendered markup:
Root tag
The menu is rendered as a DIV tag. Here is an excerpt from the example above:
| |
Copy Code |
|
<div id="RadMenu1" class="radmenu RadMenu_Outlook ">
<!-- menu content goes here -->
</div> |
The ID attribute of the DIV tag is set to the ClientID property of the RadMenu control. As you can see two CSS classes have been applied: "radmenu" and "RadMenu_Outlook". The "radmenu" class is always applied. It defines the basic presentation of the menu which is common for all skins. The "RadMenu_Outlook" class is applied because the Skin of the menu is set to "Outlook". If the the menu does not use a skin (the Skin property is set to "None") only the "radmenu" CSS class would be rendered.
If you set the Style or CssClass property of the RadMenu control they would be applied to the root menu tag:
| |
Copy Code |
|
<rad:RadMenu runat="server" ID="RadMenu1" Skin="Outlook" CssClass="MyMenu" Style="position:relative; z-index: 1000"> |
| |
Copy Code |
|
<div id="RadMenu1" class="radmenu RadMenu_Outlook MyMenu" style="position:relative; z-index: 1000"> |
Root item group
The root item group renders as a UL (unordered list) tag:
It has two CSS classes applied: "horizontal" and "rootGroup". The "horizontal" class is applied because the Flow of the RadMenu is horizontal by default. If it were vertical that CSS class would be "vertical". The "rootGroup" CSS class is always rendered.
Menu items
Menu item renders as a LI (list item) tag, containing an A (link or anchor) tag. The text of the item is rendered inside a SPAN tag:
The LI tag has its class attribute always set to "item". If the item is the first child of its parent it also has the "first" CSS class applied:
If the item is the last child of its parent it has the "last" CSS class applied:
If the item is the only child of its parent it has both the "first" and "last" CSS classes applied:
The A tag has its class attribute always set to "link":
If the Style or CssClass properties of the RadMenuItem class are set they are applied to the A tag:
Item states
The information above is valid for items in normal state. For items not in normal state, a few other CSS classes or attributes are dynamically applied:
Disabled items
When a menu item is disabled the "disabled" attribute of the A tag is set and one additional CSS class - "disabled" - is applied:
Focused items
An item is focused when clicked or when it is selected with the keyboard (by using the TAB key or a shortcut - access key). When an item is focused one additional CSS class - "focused" is applied to the A tag:
Expanded items
An item is expanded when the user hovers it with the mouse. When an item is expanded one additional CSS class - "expanded" is applied to the A tag:
Clicked items
An item is clicked when the user clicks it with the mouse and keeps the mouse button pressed. When an item is in clicked state one additional CSS class - "clicked" is applied to the A tag:
When the user releases the mouse button, the clicked css class is removed. This css class is useful to visually show that a button is clicked.
Child item groups
If the item has children they are rendered in an UL tag within the LI tag of their parent item:
|
The DIV tag whose class attribute is set to "slide" is used by the animation effects. It is not related with the final appearance and can be ignored. |
The child item group has three CSS classes applied: "vertical", "group" and "level1". The "vertical" class is applied because the default item flow for child items is vertical. If it were horizontal (GroupSettings-Flow="Horizontal") that class would have been "horizontal". The "group" class is always applied for child item groups. The "level1" class is applied for all level 1 item groups. Root items are considered as level 0, their children are level 1, their children's children are level 2 and so on.
Section 3: Graphic representation of the HTML output:
See Also