Display arrow if Menu Item has sub items

2 posts, 0 answers
  1. Chris Edmonds
    Chris Edmonds avatar
    4 posts
    Member since:
    Apr 2009

    Posted 06 Jun 2011 Link to this post

    My rad menu has various sub level and i want to display a arrow if the menu item has a sub menu item. I have edited the CSS but so far i am not being able to display the arrow .  Please advise

    .RadMenu_White .rmRootGroup,
    .RadMenu_White .rmLink,
    .RadMenu_White .rmText,
    .RadMenu_White .rmLeftArrow,
    .RadMenu_White .rmRightArrow,
    .RadMenu_White .rmTopArrow
     
    .RadMenu_White rmVertical rmRootGroup, .RadMenu_White rmHorizontalRootGroup
    {}
     
    .submenus
    {
        padding: 5px 30px 1px 15px;
        color: white;
    }
     
     
    .RadMenu_White .rmBottomArrow
    {
        background-image: url('Menu/rmSprite.png');
        background-color: transparent;
    }
     
    .RadMenu_White .rmRootGroup
    {
        border: 0px solid #828282;
        background-repeat: repeat-x;
        background-position: 0 -408px;
        background-color: Transparent;}
     
    /* <Root items> */
     
    .RadMenu_White
    {
        font: normal 14px/23px Arial, sans-serif;
        color: black;
        text-decoration: none;  
         
        padding-right:15px !important;
        padding-bottom:6px !important;
        
        
    }
    .RadMenu_White .rmLink
    {
        font: normal 14px/23px Arial, sans-serif;
        color: black;
        text-decoration: none;  
         
        padding-right:15px !important;
        padding-bottom:6px !important;
        border: solid 1px #d1d1d1;
        
    }
     
    .RadMenu_White .rmLink,
    .RadMenu_White .rmDisabled,
    .RadMenu_White .rmDisabled:hover
    {
        background-position: 0 -72px;
    }
     
    .RadMenu_White .rmText,
    .RadMenu_White .rmDisabled .rmText,
    .RadMenu_White .rmFirst .rmLink,
    .RadMenu_White .rmLast .rmText, rmText,
    .RadMenu_White .rmLast .rmLink:hover .rmText,
    .RadMenu_White .rmVertical .rmLink,
    .RadMenu_White .rmVertical .rmText
    {
        background-repeat: no-repeat;
        background-position: 0 500px;
        cursor: pointer;
    }
     
    .RadMenu_White .rmFirst .rmLink:hover, .RadMenu_White .rmLink:hover, .rmItem:hover
    {
        cursor: pointer;
        background-color: #12630a;
        color: white;
    }  
     
    .RadMenu_White .rmVertical .rmLink
    {
         
    }
     
     
     
    .RadMenu_White .rmVertical .rmLink:hover,
    .RadMenu_White .rmVertical .rmFocused,
    .RadMenu_White .rmVertical .rmExpanded,
    .RadMenu_White .rmVertical .rmExpanded:hover
    {border-style: solid;
        border-color: #131b4c;
        border-width: 0px 0;
    }
     
    .RadMenu_White .rmVertical .rmFirst .rmLink:hover,
    .RadMenu_White .rmVertical .rmFirst .rmFocused,
    .RadMenu_White .rmVertical .rmFirst .rmExpanded,
    .RadMenu_White .rmVertical .rmFirst .rmExpanded:hover
    {border-top-width: 0;
    }
     
    .RadMenu_White .rmVertical .rmLast .rmLink:hover,
    .RadMenu_White .rmVertical .rmLast .rmFocused,
    .RadMenu_White .rmVertical .rmLast .rmExpanded,
    .RadMenu_White .rmVertical .rmLast .rmExpanded:hover
    {border-bottom-width: 0;
    }
     
    .RadMenu_White .rmVertical .rmItem .rmDisabled:hover
    {border-width: 0;
     
    }
     
    .RadMenu_White .rmExpanded,
    .RadMenu_White .rmExpanded:hover
    {
    background-color:#12630a;
        background-position: 0 -72px;
         
    }
     
    .RadMenu_White .rmExpanded .rmText,
    .RadMenu_White .rmExpanded:hover .rmText
    {
        background-position: 100% -96px;
    }
     
    .RadMenu_White .rmLast .rmExpanded .rmText
    {
        background-position: 0 500px;
        background-repeat: no-repeat;
    }
     
    .RadMenu_White .rmDisabled,
    .RadMenu_White .rmDisabled:hover
    {
        color: #7d7d7d;
        background-color: transparent;
    }
     
    /* </Root items> */
     
     
    /* <Submenu items> */
     
    .RadMenu_White .rmGroup,
    .RadMenu_White .rmGroup .rmVertical
    {
        border: 0px solid #131b4c;
        /*background: transparent url('Menu/rmVSprite.png') repeat-y 0 0;*/
         
         
    }
     
    .RadMenu_White .rmSlide .rmScrollWrap
    {
        background-image: none;
        background: transparent;
         
    }
     
    .RadMenu_White_rtl .rmGroup,
    .RadMenu_White_rtl .rmGroup .rmVertical
    {
        background-position: 100% 0;
        background: transparent;
        }
     
    .RadMenu_White .rmRootGroup li.rmItem .rmGroup
    {}
     
    .RadMenu_White .rmRootGroup .rmHorizontal
    {
        background-image: none;}
     
    .RadMenu_White .rmScrollWrap .rmVertical
    {border: 0;
    }
     
    .RadMenu_White .rmGroup .rmItem .rmLink,
    .RadMenu_White .rmGroup .rmItem .rmLink:hover,
    .RadMenu_White .rmGroup .rmItem .rmFocused,
    .RadMenu_White .rmGroup .rmItem .rmExpanded
    {border: 0;
     
    }
     
    .RadMenu_White .rmGroup .rmLast .rmLink,
    .RadMenu_White .rmGroup .rmLast .rmLink:hover,
    .RadMenu_White .rmGroup .rmLast .rmFocused,
    .RadMenu_White .rmGroup .rmLast .rmExpanded
    {}
     
    .RadMenu_White .rmGroup .rmLink,
    .RadMenu_White .rmGroup .rmText,
    .RadMenu_White .rmGroup .rmItem .rmDisabled,
    .RadMenu_White .rmGroup .rmItem .rmDisabled:hover,
    .RadMenu_White .rmGroup .rmItem .rmDisabled .rmText,
    .RadMenu_White .rmGroup .rmItem .rmDisabled:hover .rmText
    {
        background-position: 0 500px;
        background-repeat: no-repeat;
    /*  background-color: transparent;*/
    }
     
    .RadMenu_White .rmGroup .rmLink:hover,
    .RadMenu_White .rmGroup .rmFocused,
    .RadMenu_White .rmGroup .rmExpanded
    {
        background-position: 0 -168px;
    }
     
    .RadMenu_White .rmGroup .rmLink:hover .rmText,
    .RadMenu_White .rmGroup .rmFocused .rmText,
    .RadMenu_White .rmGroup .rmExpanded .rmText
    {
        background-position: 100% -192px;
    }
     
    /* <expand arrows> */
     
    .RadMenu_White .rmGroup .rmExpandRight,
    .RadMenu_White .rmGroup .rmExpandDown,
    .RadMenu_White .rmGroup .rmItem .rmDisabled .rmExpandRight,
    .RadMenu_White .rmGroup .rmItem .rmDisabled .rmExpandDown,
    .RadMenu_White .rmGroup .rmItem .rmDisabled:hover .rmExpandRight,
    .RadMenu_White .rmGroup .rmItem .rmDisabled:hover .rmExpandDown
    {
        background-position: 100% -216px;
         
    }
    .RadMenu_White .rmGroup .rmLink:hover .rmExpandRight
    {
        background-image: url(images/arrow.png) no-repeat topright !important;
    }
     
     
     
    .RadMenu_White .rmGroup .rmLink:hover .rmExpandRight,
    .RadMenu_White .rmGroup .rmFocused .rmExpandRight,
    .RadMenu_White .rmGroup .rmExpanded .rmExpandRight,
    .RadMenu_White .rmGroup .rmLink:hover .rmExpandDown,
    .RadMenu_White .rmGroup .rmFocused .rmExpandDown,
    .RadMenu_White .rmGroup .rmExpanded .rmExpandDown
    {
        background-position: 100% -240px;  
    }
     
     
     
    .RadMenu_White .rmGroup .rmDisabled:hover .rmExpandRight,
    .RadMenu_White .rmGroup .rmDisabled:hover .rmExpandDown
    {
        background-image: url('Menu/rmSprite.png');
        background-position: 100% -216px;
         
    }
     
    /* </expand arrows> */
     
    /* <rtl> */
     
    .RadMenu_White_rtl .rmLink
    {
        background-position: 100% -96px;
         
    }
     
    .RadMenu_White_rtl .rmText
    {
        background-position: 0 -72px;
    }
     
    .RadMenu_White_rtl .rmVertical .rmExpanded .rmText,
    .RadMenu_White_rtl .rmVertical .rmExpanded:hover .rmText
    {
        background-position: 0 500px;
        background-repeat: no-repeat;
    }
     
    .RadMenu_White_rtl .rmGroup .rmLink:hover,
    .RadMenu_White_rtl .rmGroup .rmFocused,
    .RadMenu_White_rtl .rmGroup .rmExpanded
    {
        background-position: 100% -264px;
    }
     
    .RadMenu_White_rtl .rmGroup .rmLink:hover .rmText,
    .RadMenu_White_rtl .rmGroup .rmFocused .rmText,
    .RadMenu_White_rtl .rmGroup .rmExpanded .rmText
    {
        background-position: 0 -288px;
    }
     
    .RadMenu_White_rtl .rmGroup .rmExpandLeft
    {
        background-position: 0 -312px;
    }
     
    .RadMenu_White_rtl .rmGroup .rmLink:hover .rmExpandLeft,
    .RadMenu_White_rtl .rmGroup .rmFocused .rmExpandLeft,
    .RadMenu_White_rtl .rmGroup .rmExpanded .rmExpandLeft
    {
        background-position: 0 -336px;
    }
     
    /* </rtl> */
     
    /* </Submenu items> */
     
    /* <Submenu offsets (Telerik - specific, overlapping submenus)> */
     
    .RadMenu_White .rmSlide
    {  
        border-style:solid;
        border-color:#58b749;
        background:#58b749;
        border-width:0px;  
        /*margin: 15px 5px 5px 15px;*/
        color:White;
        
    }
     
     
    .RadMenu_White .rmVertical .rmSlide,
    .RadMenu_White .rmSlide .rmSlide,
    .RadMenu_White_Context .rmGroup .rmSlide
    {
        /*margin: 0 0 0 -0x;*/
    }
     
    .RadMenu_White_rtl .rmSlide
    {
        /*margin: 0 0 0 0;*/
    }
     
    .RadMenu_White_rtl .rmFirst .rmSlide
    {
        /*margin-left: 0px;*/
    }
     
    .RadMenu_White_rtl .rmVertical .rmSlide,
    .RadMenu_White_rtl .rmSlide .rmSlide,
    .RadMenu_White_Context_rtl .rmGroup .rmSlide
    {
        /*margin: 0px 0px 0px 0px;*/
    }
     
    /* </Submenu offsets> */
     
    /* <Scrolling arrows> */
     
    .RadMenu_White .rmLeftArrow,
    .RadMenu_White .rmRightArrow
    {
        background-color: #E6E6E6;
    }
     
    .RadMenu_White .rmLeftArrow { background-position: -8px -312px; border-right: 1px solid #828282; }
    .RadMenu_White .rmRightArrow { background-position: -482px -216px; border-left: 1px solid #828282; }
     
    .RadMenu_White .rmTopArrow,
    .RadMenu_White .rmBottomArrow,
    .RadMenu_White .rmGroup .rmLeftArrow,
    .RadMenu_White .rmGroup .rmRightArrow
    {
        background-color: #E6E6E6;
    }
     
    .RadMenu_White .rmTopArrow { background-position: 50% -367px; border-bottom: 0px solid #828282; }
    .RadMenu_White .rmBottomArrow { background-position: 50% -391px; border-top: 0px solid #828282; }
     
    /* </Scrolling arrows> */
     
    /* <Separators> */
     
    .RadMenu_White .rmHorizontal .rmSeparator .rmText,
    .RadMenu_White .rmVertical .rmHorizontal .rmSeparator .rmText
    {
        height: 22px;width: 0px;
        background-color: #A8A8A8;
    }
     
    .RadMenu_White_Context .rmSeparator .rmText,
    .RadMenu_White .rmHorizontal .rmGroup .rmSeparator .rmText,
    .RadMenu_White .rmVertical .rmHorizontal .rmGroup .rmSeparator .rmText
    {
        background-color: transparent;
        background-position: 0 -406px;}
       
      .RadMenu_White .rmLeftImage, RadMenu RadMenu_White, rmItem rmFirst, rmHorizontal rmRootGroup, rmLink  rmExpanded, .rmLeftImage, .rmLink, .rmText rmExpandDown, .RadMenu .rmLink .rmText    
    {
        margin:0px 0px 0px 0px !Important;
        padding: 0px 0px 0px 0px !Important;
        float: none
         
    }
    .RadMenu_White .rmItem
    {
        background:transparent !important;
    }
     
    /* </Separators> */
     
    /* </RadMenu / Telerik> */
  2. Kate
    Admin
    Kate avatar
    1898 posts

    Posted 09 Jun 2011 Link to this post

    Hi Chris,

    Can you specify if you are using Vertical flow or a Horizontal flow of the RadMenu? A simple image of how the RadMenu should look like would also be helpful.

    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.

Back to Top