This is a migrated thread and some comments may be shown as answers.
Root menu bar end image not showing
2 Answers 29 Views
This is a migrated thread and some comments may be shown as answers.
Mugdha Aditya
Top achievements
Rank 1
Mugdha Aditya asked on 10 Aug 2011, 03:30 PM
Hello,

i am using radmenu bar for which i have used telerik image with some color changes but after  last menu bar it is not showing vertical bar  which i want .

i have atteched scrren shot and image which i have used for the same.

its very urgent :(

Below is my css.

/* <RadMenu / Default> */
  
.RadMenu_RadMenuCss .rmRootGroup,
.RadMenu_RadMenuCss a.rmLink,
.RadMenu_RadMenuCss .rmGroup .rmText,
.RadMenu_RadMenuCss .rmVertical .rmText,
.RadMenu_RadMenuCss .rmLeftArrow,
.RadMenu_RadMenuCss .rmRightArrow,
.RadMenu_RadMenuCss .rmTopArrow,
.RadMenu_RadMenuCss .rmBottomArrow
{
    background-image: url('Menu/rmSprite.png');
    background-color: transparent;
}
  
.RadMenu_RadMenuCss .rmRootGroup
{
    background-repeat: repeat-x;
    background-position: 0 -408px;
    background-color: #e6e6e6;
}
  
/* <Root items> */
  
.RadMenu_RadMenuCss,
.RadMenu_RadMenuCss a.rmLink
{
    font-size: 14px
    font-family :Calibri;
    font-style:normal;
    color:#fff;
    background-color:#dcdcdc;
    text-decoration: none;
}
  
.RadMenu_RadMenuCss a.rmLink
{
    background-position: 0 -72px;
}
  
.RadMenu_RadMenuCss .rmVertical .rmFirst,
.RadMenu_RadMenuCss .rmVertical .rmLast
{
    background: none;
}
  
.RadMenu_RadMenuCss a.rmLink:hover,
.RadMenu_RadMenuCss a.rmFocused,
.RadMenu_RadMenuCss a.rmSelected
{
    color : #dcdcdc !important;
    background-color: #dcdcdc !important;
}
  
.RadMenu_RadMenuCss .rmHorizontal .rmRootLink span.rmText
{
    display: inline;
    padding-left: 12px;
}
  
.RadMenu_RadMenuCss_rtl .rmRootLink span.rmText
{
    padding-right: 12px;
}
  
.RadMenu_RadMenuCss_Context_rtl .rmRootLink span.rmText
{
    padding-right: 28px;
}
  
.RadMenu_RadMenuCss .rmHorizontal a.rmRootLink
{
    padding-left: 0;
}
  
.RadMenu_RadMenuCss_rtl a.rmRootLink
{
    margin-left: 0;
    padding: 0;
}
  
.RadMenu_RadMenuCss .rmHorizontal .rmItem > a.rmRootLink /* IE6 doesn't like width: 100% on its items. */
{
    width: 100%;
}
  
.RadMenu_RadMenuCss ul.rmHorizontal .rmLeftImage
{
    margin: 4px -4px 0 6px;
}
  
.RadMenu_RadMenuCss_rtl ul.rmHorizontal .rmLeftImage
{
    margin: 4px 6px 0 -4px;
}
  
.RadMenu_RadMenuCss .rmVertical a.rmLink
{
    padding-top: 1px;
    padding-bottom: 1px;
}
  
.RadMenu_RadMenuCss .rmVertical a.rmLink:hover,
.RadMenu_RadMenuCss .rmVertical a.rmFocused,
.RadMenu_RadMenuCss .rmVertical a.rmSelected,
.RadMenu_RadMenuCss .rmVertical a.rmExpanded,
.RadMenu_RadMenuCss .rmVertical a.rmExpanded:hover
{
    padding-top: 0;
    padding-bottom: 0;
}
  
.RadMenu_RadMenuCss .rmVertical .rmFirst a.rmLink:hover,
.RadMenu_RadMenuCss .rmVertical .rmFirst a.rmFocused,
.RadMenu_RadMenuCss .rmVertical .rmFirst a.rmSelected,
.RadMenu_RadMenuCss .rmVertical .rmFirst a.rmExpanded,
.RadMenu_RadMenuCss .rmVertical .rmFirst a.rmExpanded:hover
{
    padding-top: 1px;
    padding-bottom: 0;
    border-top-width: 0;
}
  
.RadMenu_RadMenuCss .rmVertical .rmLast a.rmLink:hover,
.RadMenu_RadMenuCss .rmVertical .rmLast a.rmFocused,
.RadMenu_RadMenuCss .rmVertical .rmLast a.rmSelected,
.RadMenu_RadMenuCss .rmVertical .rmLast a.rmExpanded,
.RadMenu_RadMenuCss .rmVertical .rmLast a.rmExpanded:hover
{
    padding-bottom: 1px;
    padding-top: 0;
    border-bottom-width: 0;
}
  
.RadMenu_RadMenuCss .rmVertical .rmItem a.rmDisabled:hover
{
    padding-top: 1px;
    padding-bottom: 1px;
    border-width: 0;
}
  
.RadMenu_RadMenuCss a.rmExpanded,
.RadMenu_RadMenuCss a.rmExpanded:hover
{
    background-color: #fff;
}
  
  
/* </Root items> */
  
  
/* <Submenu items> */
  
.RadMenu_RadMenuCss .rmGroup,
.RadMenu_RadMenuCss .rmMultiColumn,
.RadMenu_RadMenuCss .rmGroup .rmVertical
{
    background: #fff url('Menu/rmVSprite.png') repeat-y 0 0;
}
  
.RadMenu_RadMenuCss .rmTopFix,
.RadMenu_RadMenuCss .rmBottomFix,
.RadMenu_RadMenuCss .rmRoundedCorners .rmGroup .rmItem,
.RadMenu_RadMenuCss .rmRoundedCorners li.rmFirstGroupColumn .rmItem,
.RadMenu_RadMenuCss .rmRoundedCorners .rmFirstGroupColumn li.rmFirstGroupColumn .rmItem,
.RadMenu_RadMenuCss .rmRoundedCorners ul.rmHorizontal .rmFirst,
.RadMenu_RadMenuCss_Context.rmRoundedCorners .rmGroup .rmItem,
.RadMenu_RadMenuCss_Context.rmRoundedCorners ul.rmHorizontal .rmFirst
{
    background-image: url('Menu/rmVSprite.png');
    background-color: #fff
    background-repeat: repeat-y;
}
  
* html .rmRoundedCorners_RadMenuCss .rmGroup .rmItem,
* html .rmRoundedCorners_RadMenuCss ul.rmHorizontal .rmFirst
{
    background-image: url('Menu/rmVSprite.png');
    background-color: #fff
    background-repeat: repeat-y;
}
  
.RadMenu_RadMenuCss .rmRoundedCorners .rmScrollWrapContainer .rmGroup,
.RadMenu_RadMenuCss .rmRoundedCorners .rmScrollWrap .rmItem,
.RadMenu_RadMenuCss .rmRoundedCorners .rmGroupColumn .rmItem,
.RadMenu_RadMenuCss .rmRoundedCorners .rmGroupColumn .rmGroupColumn .rmItem,
.RadMenu_RadMenuCss .rmRoundedCorners .rmHorizontal .rmItem,
.RadMenu_RadMenuCss .rmRoundedCorners .rmScrollWrap .rmVertical,
.RadMenu_RadMenuCss_Context.rmRoundedCorners .rmScrollWrapContainer .rmGroup,
.RadMenu_RadMenuCss_Context.rmRoundedCorners .rmScrollWrap .rmItem,
.RadMenu_RadMenuCss_Context.rmRoundedCorners .rmHorizontal .rmItem,
.RadMenu_RadMenuCss_Context.rmRoundedCorners .rmScrollWrap .rmVertical
{
    background-image: none;
}
  
* html .rmRoundedCorners_RadMenuCss .rmScrollWrapContainer .rmGroup,
* html .rmRoundedCorners_RadMenuCss .rmScrollWrap .rmItem,
* html .rmRoundedCorners_RadMenuCss .rmHorizontal .rmItem,
* html .rmRoundedCorners_RadMenuCss .rmScrollWrap .rmVertical
{
    background-image: none;
}
  
.RadMenu_RadMenuCss .rmRoundedCorners .rmGroupColumn
{
    background-color: #fff;
}
  
.RadMenu_RadMenuCss .rmBottomLeft,
.RadMenu_RadMenuCss .rmRoundedCorners .rmScrollWrapContainer,
.RadMenu_RadMenuCss_Context.rmRoundedCorners .rmScrollWrapContainer,
.RadMenu_RadMenuCss_Context.rmRoundedCorners ul.rmGroup,
.RadMenu_RadMenuCss .rmRoundedCorners ul.rmGroup,
.RadMenu_RadMenuCss .rmRoundedCorners .rmMultiColumn
{
    background-imageurl('Menu/rmRoundedLeft.png');
    background-color: transparent
    background-repeat: no-repeat;
}
  
* html .rmRoundedCorners_RadMenuCss .rmScrollWrapContainer,
* html .rmRoundedCorners_RadMenuCss .rmGroup ul.rmGroup,
* html .rmRoundedCorners_RadMenuCss ul.rmGroup
{
    background-imageurl('Menu/rmRoundedLeft.png');
    background-color: transparent
    background-repeat: no-repeat;
}
  
.RadMenu_RadMenuCss .rmTopRight,
.RadMenu_RadMenuCss .rmBottomRight
{
    background-imageurl('Menu/rmRoundedRight.png');
    background-color: transparent
    background-repeat: no-repeat;
}
  
  
.RadMenu_RadMenuCss .rmRoundedCorners .rmScrollWrapContainer .rmTopFix,
.RadMenu_RadMenuCss .rmRoundedCorners .rmScrollWrapContainer .rmBottomFix,
.RadMenu_RadMenuCss_Context.rmRoundedCorners .rmScrollWrapContainer .rmTopFix,
.RadMenu_RadMenuCss_Context.rmRoundedCorners .rmScrollWrapContainer .rmBottomFix
{
    background: #FFF;
}
  
* html .rmRoundedCorners_RadMenuCss .rmScrollWrapContainer .rmTopFix,
* html .rmRoundedCorners_RadMenuCss .rmScrollWrapContainer .rmBottomFix
{
    background: #FFF;
}
  
.RadMenu_RadMenuCss .rmRoundedCorners .rmScrollWrapContainer .rmTopArrow,
.RadMenu_RadMenuCss .rmRoundedCorners .rmScrollWrapContainer .rmBottomArrow,
.RadMenu_RadMenuCss .rmRoundedCorners .rmScrollWrapContainer .rmLeftArrow,
.RadMenu_RadMenuCss .rmRoundedCorners .rmScrollWrapContainer .rmRightArrow,
.RadMenu_RadMenuCss_Context.rmRoundedCorners .rmScrollWrapContainer .rmTopArrow,
.RadMenu_RadMenuCss_Context.rmRoundedCorners .rmScrollWrapContainer .rmBottomArrow,
.RadMenu_RadMenuCss_Context.rmRoundedCorners .rmScrollWrapContainer .rmLeftArrow,
.RadMenu_RadMenuCss_Context.rmRoundedCorners .rmScrollWrapContainer .rmRightArrow
{
    background-color: #FFF;
    border: 0;
}
  
* html .rmRoundedCorners_RadMenuCss .rmScrollWrapContainer .rmTopArrow,
* html .rmRoundedCorners_RadMenuCss .rmScrollWrapContainer .rmBottomArrow,
* html .rmRoundedCorners_RadMenuCss .rmScrollWrapContainer .rmLeftArrow,
* html .rmRoundedCorners_RadMenuCss .rmScrollWrapContainer .rmRightArrow
{
    background-color: #FFF;
    border: 0;
}
  
  
.RadMenu_RadMenuCss_rtl li.rmTopFix,
.RadMenu_RadMenuCss_rtl li.rmBottomFix,
.RadMenu_RadMenuCss_rtl .rmRoundedCorners .rmGroup .rmItem,
.rmRoundedCorners.RadMenu_RadMenuCss_Context_rtl .rmGroup .rmItem
{
    background-position: 101% 0;
}
  
.RadMenu_RadMenuCss .rmSlide .rmScrollWrap
{
    background-image: none;
}
  
.RadMenu_RadMenuCss_rtl .rmGroup,
.RadMenu_RadMenuCss_rtl .rmMultiColumn,
.RadMenu_RadMenuCss_rtl .rmGroup .rmVertical
{
    background-position: 100% 0;
}
  
.RadMenu_RadMenuCss .rmRootGroup li.rmItem .rmGroup
{
    padding-bottom: 0;
}
  
.RadMenu_RadMenuCss .rmRootGroup .rmHorizontal
{
    background-image: none;
}
  
.RadMenu_RadMenuCss .rmScrollWrap .rmVertical
{
    border: 0;
}
  
.RadMenu_RadMenuCss .rmRoundedCorners .rmScrollWrapContainer li.rmItem,
.RadMenu_RadMenuCss_Context.rmRoundedCorners .rmScrollWrapContainer li.rmItem,
.rmRoundedCorners_RadMenuCss .rmScrollWrapContainer li.rmItem
{
    background: none;
}
  
.RadMenu_RadMenuCss .rmGroup .rmItem a.rmLink,
.RadMenu_RadMenuCss .rmGroup .rmItem a.rmLink:hover,
.RadMenu_RadMenuCss .rmGroup .rmItem a.rmFocused,
.RadMenu_RadMenuCss .rmGroup .rmItem a.rmSelected,
.RadMenu_RadMenuCss .rmGroup .rmItem a.rmExpanded
{
    padding-top: 0;
    padding-bottom: 0;
    border: 0;
}
  
  
  
.RadMenu_RadMenuCss .rmGroup a.rmLink,
.RadMenu_RadMenuCss .rmGroup .rmText,
.RadMenu_RadMenuCss .rmGroup .rmItem a.rmDisabled,
.RadMenu_RadMenuCss .rmGroup .rmItem a.rmDisabled:hover,
.RadMenu_RadMenuCss .rmGroup .rmItem a.rmDisabled .rmText,
.RadMenu_RadMenuCss .rmGroup .rmItem a.rmDisabled:hover .rmText
{
    background-position: 0 500px;
    background-repeat: no-repeat;
    background-color: transparent;
}
  
.RadMenu_RadMenuCss .rmGroup a.rmLink:hover,
.RadMenu_RadMenuCss .rmGroup a.rmFocused,
.RadMenu_RadMenuCss .rmGroup a.rmSelected,
.RadMenu_RadMenuCss .rmGroup a.rmExpanded
{
    background-position: 0 -168px;
}
  
.RadMenu_RadMenuCss .rmGroup a.rmLink:hover .rmText,
.RadMenu_RadMenuCss .rmGroup a.rmFocused .rmText,
.RadMenu_RadMenuCss .rmGroup a.rmSelected .rmText,
.RadMenu_RadMenuCss .rmGroup a.rmExpanded .rmText
{
    color : #28638f
    background-position: 100% -192px;
}
  
  
/* </rtl> */
  
/* </Submenu items> */
  
/* <Submenu offsets (Default - specific, overlapping submenus)> */
  
.RadMenu_RadMenuCss .rmSlide
{
    margin: 0 0 0 -1px;
}
  
.RadMenu_RadMenuCss .rmVertical .rmSlide,
.RadMenu_RadMenuCss .rmSlide .rmSlide,
.RadMenu_RadMenuCss_Context .rmGroup .rmSlide
{
    margin: 0 0 0 -5px;
}
  
.RadMenu_RadMenuCss_rtl .rmSlide
{
    margin: 0 0 0 0;
}
  
.RadMenu_RadMenuCss_rtl .rmFirst .rmSlide
{
    margin-left: 1px;
}
  
.RadMenu_RadMenuCss_rtl .rmVertical .rmSlide,
.RadMenu_RadMenuCss_rtl .rmSlide .rmSlide,
.RadMenu_RadMenuCss_Context_rtl .rmGroup .rmSlide
{
    margin: 0 0 0 5px;
}
  
  
/* </Scrolling arrows> */
  
/* <Separators> */
  
.RadMenu_RadMenuCss .rmHorizontal .rmSeparator .rmText,
.RadMenu_RadMenuCss .rmVertical .rmHorizontal .rmSeparator .rmText
{
    height: 22px;
    margin: 1px 0 0;
    width: 1px;
    background-color: #A8A8A8;
}
  
.RadMenu_RadMenuCss_Context .rmSeparator .rmText,
.RadMenu_RadMenuCss .rmHorizontal .rmGroup .rmSeparator .rmText,
.RadMenu_RadMenuCss .rmVertical .rmHorizontal .rmGroup .rmSeparator .rmText
{
    background-color: transparent;
    background-position: 0 -406px;
}
  
/* </Separators> */
  
/* </RadMenu / Default> */
  
  
.RadMenu_RadMenuCss .rmVertical 
    background-color#28638f;
}
  
 .RadMenu_RadMenuCss .rmGroup .rmItem .rmLink
{
    TEXT-ALIGN: left;
    LINE-HEIGHT: 22px;
    FONT-STYLE: normal;
    TEXT-INDENT: -21px;
    font-size: 13px;
    PADDING-LEFT: 2px;
    MARGIN-LEFT: 2px;
    PADDING-RIGHT: 1px;
    MARGIN-RIGHT: 1px;
    PADDING-BOTTOM: 1px;
    MARGIN-BOTTOM: 1px;
}


2 Answers, 1 is accepted

Sort by
0
Kate
Telerik team
answered on 16 Aug 2011, 08:43 AM
Hello Mugdha,

I looked at the sprite image that you apply to the RadMenu and it seems that whenever you apply a background position the separators will appear either on every left side or right side of the RadMenuItem. However, if you need to have a separator on both left and right side you will need to explicitly specify that by adding a RadMenuItem and set its IsSeparator property to true:
<telerik:RadMenuItem runat="server" IsSeparator="true">
</telerik:RadMenuItem>

Best wishes,
Kate
the Telerik team

Browse the vast support resources we have to jump start your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.

0
Mugdha Aditya
Top achievements
Rank 1
answered on 16 Aug 2011, 11:42 AM
thnks for your reply , but its not wroking :(

If i add ISSeperator="true" in all radmenuitem , it will disable all menuitem after debug
Tags
Menu
Asked by
Mugdha Aditya
Top achievements
Rank 1
Answers by
Kate
Telerik team
Mugdha Aditya
Top achievements
Rank 1
Share this question
or