RadMenu

CSS selectors and descriptions for RadMenu style sheets

CLASS NAME ELEMENT DESCRIPTION

RadMenu_[Skin]e.g.
DIV Applied to the root element of the menu.
RadMenu_ Outlook
Applied to the root element of the menu when it has a right-to-left
RadMenu_[Skin]_rtl DIV
orientation.
.rmRootGroup UL Applied to the first level item container (root item group).
.rmVertical UL Applied to the item container if the item flow is vertical.
.rmHorizontal UL Applied to the item container if the item flow is horizontal.
.rmGroup UL Applied to each item container except the root level one.
Applied to item containers at the respective level. (Does not apply to
.rmLevel[n] UL
the root item group.)
.rmItem LI Applied to the LI elements enclosing each item.
Applied to the LI element enclosing the first item in a group. Used to
customize the appearance of the first item
only:.RadMenu_Office2007
.rmFirst LI .rmGroup . rmFirst .rmLink,.RadMenu_Office2007
.rmGroup . rmFirst .rmTemplate{background: transparent
url(Menu/MenuItemBgFirst.gif) no-repeat left bottom;line-height:
58px;}
Applied to the LI element enclosing the last item in a group. Used to
customize the appearance of the last item
.rmLast LI only:.RadMenu_Office2007 .rmGroup . rmLast .rmLink{background:
transparent url(Menu/MenuItemBgLast.gif) no-repeat;line-height:
58px;}
Applied to the LI element enclosing an item that is a separator
.rmSeparator LI
( IsSeparator is True ).
.rmLink A Applied to the anchors representing each item in its default state.
Applied to the item's anchor when it is focused by either the mouse or
.rmFocused A
the keyboard.
.rmClicked A Applied to the item's anchor the user clicks the item.
.rmExpanded A Applied to the item's anchor tag when the item is opened.
.rmDisabled A Applied to the item's anchor when the item is disabled.
Applied to the left scrolling arrow. Scrolling arrows are dynamically
.rmLeftArrow A created. Use that CSS class to customize the appearance of the left
scrolling arrow (used in horizontal item flow).
Applied to the right scrolling arrow. Scrolling arrows are dynamically
.rmRightArrow A created. Use that CSS class to customize the appearance of the right
scrolling arrow (used in horizontal item flow).
Applied to the top scrolling arrow. Scrolling arrows are dynamically
.rmTopArrow A created. Use that CSS class to customize the appearance of the top
scrolling arrow (used in vertical item flow).
Applied to the bottom scrolling arrow. Scrolling arrows are
.rmBottomArrow A dynamically created. Use that CSS class to customize the appearance
of the bottom scrolling arrow (used in vertical item flow).
.rmLeftArrowDisabled A Applied to the left scrolling arrow if there is no scroll space left.
.rmRightArrowDisabled A Applied to the right scrolling arrow if there is no scroll space left.
.rmTopArrowDisabled A Applied to the top scrolling arrow if there is no scroll space left.
.rmBottomArrowDisabled A Applied to the bottom scrolling arrow if there is no scroll space left.
CLASS NAME ELEMENT DESCRIPTION
.rmText SPAN Applied to the SPAN element that encloses an item's text.
Applied to the SPAN element that encloses each item text if the item
has child items and will expand to the right . Used to specify the arrow
image via the background CSS
.rmExpandLeft SPAN
attribute:.RadMenu_Outlook_rtl . rmExpandLeft ,.RadMenu_Outlook
_rtl .rmExpandRight{background:transparent
url(Menu/groupImageRTL.gif) left center no-repeat;}
Applied to the SPAN element which encloses each item text if the item
.rmExpandBottom SPAN has child items and will expand downward. Used to specify the arrow
image via the background CSS attribute.
Applied to the SPAN element which encloses each item text if the item
.rmExpandTop SPAN has child items and will expand upward . Used to specify the arrow
image via the background CSS attribute.
Applied to the SPAN element that encloses each item text if the item
has child items and will expand to the left . Used to specify the arrow
.rmExpandRight SPAN image via the background CSS attribute:.RadMenu_Outlook_rtl
.rmExpandLeft,.RadMenu_Outlook_rtl . rmExpandRight {backgroun
d:transparent url(Menu/groupImageRTL.gif) left center no-repeat;}

Multiple menus on master page from sitemap

Create two sitemap files called: TopMenu.sitemap and LeftMenu.sitemap, and add providers in
web.confg file:
<siteMap defaultProvider="AspNetXmlSiteMapProvider">
<providers>
<add name="LeftMenuProvider" siteMapFile="LeftMenu.sitemap"
type="System.Web.XmlSiteMapProvider" />
<add name="TopMenuProvider" siteMapFile="TopMenu.sitemap"
type="System.Web.XmlSiteMapProvider" />
</providers>
</siteMap>

add two SiteMapDataSources to the master page and set their properties to:
for the left menu: ID smdsLeft, SiteMapProvider LeftMenuProvider
for the top menu ID smdsTop, SiteMapProvider TopMenuProvider

Add two menus and choose the smsdLeft and smsdTop as data source for them

<div tabindex="0" id="ctl00_RadMenu1" class="RadMenu RadMenu_Bootstrap radMainMenu">

<ul class="rmRootGroup rmToggleHandles rmHorizontal">
<li class="rmItem rmFirst">
<a class="rmLink rmRootLink" href="Default.aspx">Home</a>
</li>
<li class="rmItem ">
<a class="rmLink rmRootLink" href="Soumya.aspx">
<span class="rmText">Soumya</span>
<span class="rmToggle">
<span class="rmIcon">Toggle</span>
 </span>
</a>
<div class="rmSlide">
<ul class="rmHorizontal rmGroup rmLevel1">
<li class="rmItem rmFirst">
<a class="rmLink" href="soumMarriagePhotos.aspx">Level I – 1</a>
</li>
<li class="rmItem ">
<a class="rmLink" href="soumMarriageVideo.aspx">Level I – 2</a>
</li>
<li class="rmItem rmLast">
<a class="rmLink" href="soumReceptionVideo.aspx">
<span class="rmText">Level I – 3</span>
<span class="rmToggle">
<span class="rmIcon">Toggle</span>
</span>
</a>
<div class="rmSlide">
<ul class="rmVertical rmGroup rmLevel2">
<li class="rmItem rmFirst"><a class="rmLink" href="soumMarriagePhotos.aspx">Level II -
1</a></li><li class="rmItem rmLast"><a class="rmLink" href="soumMarriageVideo.aspx">Level
II – 2</a></li>
</ul>
</div></li>
</ul>
</div></li><li class="rmItem rmLast"><a class="rmLink rmRootLink"
href="sathya.aspx">Sathya</a></li>
</ul><input id="ctl00_RadMenu1_ClientState" name="ctl00_RadMenu1_ClientState"
type="hidden" />
</div>