Formatting of RadMenu

7 posts, 2 answers
  1. Kurt Kluth
    Kurt Kluth avatar
    144 posts
    Member since:
    Oct 2009

    Posted 18 Nov 2013 Link to this post

    We have a menu system that is being developed for our primary websites.  I have been unsuccessful in my attempts to implement it into an internal site.  Thus I have decided to try and use the RadMenu.  From the attached screenshots you can see that I almost have this and can't get the remainder figured out. 

    GoodMenu.png and SelectedMenu.png is my end goal of what I am trying to get too. 
    RadMenu.png is what I currently have. 

    How can I achieve the following?
    1. On hover of the top level I am unable to get it to change from the radiant purple to the green. 
    2. Also is there anyway to change the text color on the top level from white to green when the user is in that section.  ie. if user hovers over "Data Submission", it will turn the background color green (#6d9c1f).  If they click "Data Submission" or any of the links below it, the font color would turn from white to green. 
    3. Reduce the size of the boarder around the sub-menu's? 


    I tried using the Visual Style Builder but found it not to work as I had hoped.

    Snippet of ASPX code

    <telerik:RadMenu ID="RadMenu1" runat="server" Width="100%"
        EnableRoundedCorners="True" EnableShadows="True" EnableTextHTMLEncoding="True"
        style="z-index:2900" cssclass="RadMenu_ASI">
        <Items>
            <telerik:RadMenuItem runat="server" NavigateUrl="~/finStatement/default.aspx"
                Text="Data Submission">
                <Items>
                    <telerik:RadMenuItem runat="server" NavigateUrl="~/finStatement/fsDefault.aspx"
                        Text="Add, Edit, or View Your Financial Statement">
                    </telerik:RadMenuItem>
                    <telerik:RadMenuItem runat="server"
                        NavigateUrl="~/finStatement/dataUpload.aspx?format=NCUA"
                        Text="Upload Form 5300">
                    </telerik:RadMenuItem>
                    <telerik:RadMenuItem runat="server"
                        NavigateUrl="~/finStatement/dataUpload.aspx?format=INS"
                        Text="Upload Excess Insured Accounts File">
                    </telerik:RadMenuItem>
                    <telerik:RadMenuItem runat="server"
                        NavigateUrl="~/finStatement/InsDescription.aspx"
                        Text="Excess Insured Account File Layout">
                    </telerik:RadMenuItem>
                </Items>
            </telerik:RadMenuItem>
            <telerik:RadMenuItem runat="server"
                NavigateUrl="~/premiumPayments/default.aspx" Text="Premium Payment System">
                <Items>
                    <telerik:RadMenuItem runat="server"
                        NavigateUrl="~/premiumPayments/demo/SlideShow.aspx"
                        Text="Demo - Premium Payment System ">
                    </telerik:RadMenuItem>
                    <telerik:RadMenuItem runat="server" NavigateUrl="~/premiumPayments/pps.aspx"
                        Text="Premium Payment System Login ">
                    </telerik:RadMenuItem>
                </Items>
            </telerik:RadMenuItem>
        </Items>
         
    </telerik:RadMenu>


    Snippet of css

    /* RAD MENU STYLE */
    .RadMenu_ASI .rmRootGroup,.RadMenu_ASI a.rmLink,.RadMenu_ASI .rmGroup .rmText,.RadMenu_ASI .rmVertical .rmText,.RadMenu_ASI .rmLeftArrow,.RadMenu_ASI .rmRightArrow,.RadMenu_ASI .rmTopArrow,.RadMenu_ASI .rmBottomArrow{background-image:url('Menu/rmSprite.png');background-color:transparent}
    .RadMenu_ASI .rmRootGroup{border:1px solid #828282;background-repeat:repeat-x;background-position:0 -408px;background-color:#e6e6e6}
    .RadMenu_ASI,.RadMenu_ASI a.rmLink{font:normal 12px/23px "Segoe UI",Arial,sans-serif;color:#000;text-decoration:none}
    .RadMenu_ASI a.rmLink,.RadMenu_ASI a.rmDisabled,.RadMenu_ASI a.rmDisabled:hover{background-position:0 -72px}
    .RadMenu_ASI .rmFirst a.rmLink,.RadMenu_ASI .rmFirst a.rmLink:hover,.RadMenu_ASI .rmLast .rmText,.RadMenu_ASI .rmLast a.rmLink:hover .rmText,.RadMenu_ASI .rmVertical a.rmLink,.RadMenu_ASI .rmVertical .rmText{background-repeat:no-repeat;background-position:0 500px}
    .RadMenu_ASI .rmVertical .rmFirst,.RadMenu_ASI .rmVertical .rmLast{background:0}
    .RadMenu_ASI a.rmLink:hover,.RadMenu_ASI a.rmFocused,.RadMenu_ASI a.rmSelected{background-color:#fff}
    .RadMenu_ASI .rmHorizontal .rmRootLink span.rmText{display:inline;padding-left:12px}
    .RadMenu_ASI_rtl .rmRootLink span.rmText{padding-right:12px}
    .RadMenu_ASI_Context_rtl .rmRootLink span.rmText{padding-right:28px}
    .RadMenu_ASI .rmHorizontal a.rmRootLink{padding-left:0}
    .RadMenu_ASI_rtl a.rmRootLink{margin-left:0;padding:0}
    .RadMenu_ASI .rmHorizontal .rmItem>a.rmRootLink{width:100%}
    .RadMenu_ASI ul.rmHorizontal .rmLeftImage{margin:4px -4px 0 6px}
    .RadMenu_ASI_rtl ul.rmHorizontal .rmLeftImage{margin:4px 6px 0 -4px}
    .RadMenu_ASI .rmVertical a.rmLink{padding-top:1px;padding-bottom:1px}
    .RadMenu_ASI .rmVertical a.rmLink:hover,.RadMenu_ASI .rmVertical a.rmFocused,.RadMenu_ASI .rmVertical a.rmSelected,.RadMenu_ASI .rmVertical a.rmExpanded,.RadMenu_ASI .rmVertical a.rmExpanded:hover{padding-top:0;padding-bottom:0;border-style:solid;border-color:#828282;border-width:1px 0}
    .RadMenu_ASI .rmVertical .rmFirst a.rmLink:hover,.RadMenu_ASI .rmVertical .rmFirst a.rmFocused,.RadMenu_ASI .rmVertical .rmFirst a.rmSelected,.RadMenu_ASI .rmVertical .rmFirst a.rmExpanded,.RadMenu_ASI .rmVertical .rmFirst a.rmExpanded:hover{padding-top:1px;padding-bottom:0;border-top-width:0}.RadMenu_ASI .rmVertical .rmLast a.rmLink:hover,.RadMenu_ASI .rmVertical .rmLast a.rmFocused,.RadMenu_ASI .rmVertical .rmLast a.rmSelected,.RadMenu_ASI .rmVertical .rmLast a.rmExpanded,.RadMenu_ASI .rmVertical .rmLast a.rmExpanded:hover{padding-bottom:1px;padding-top:0;border-bottom-width:0}.RadMenu_ASI .rmVertical .rmItem a.rmDisabled:hover{padding-top:1px;padding-bottom:1px;border-width:0}.RadMenu_ASI a.rmExpanded,.RadMenu_ASI a.rmExpanded:hover{background-color:#fff}.RadMenu_ASI a.rmDisabled,.RadMenu_ASI a.rmDisabled:hover{color:#7d7d7d;background-color:transparent}.RadMenu_ASI .rmGroup,.RadMenu_ASI .rmMultiColumn,.RadMenu_ASI .rmGroup .rmVertical{border:1px solid #979797;background:white url('Menu/rmVSprite.png') repeat-y 0 0}.RadMenu_ASI .rmTopFix,.RadMenu_ASI .rmBottomFix,.RadMenu_ASI .rmRoundedCorners .rmGroup .rmItem,.RadMenu_ASI .rmRoundedCorners li.rmFirstGroupColumn .rmItem,.RadMenu_ASI .rmRoundedCorners .rmFirstGroupColumn li.rmFirstGroupColumn .rmItem,.RadMenu_ASI .rmRoundedCorners ul.rmHorizontal .rmFirst,.RadMenu_ASI_Context.rmRoundedCorners .rmGroup .rmItem,.RadMenu_ASI_Context.rmRoundedCorners ul.rmHorizontal .rmFirst{background-image:url('Menu/rmVSprite.png');background-color:#fff;background-repeat:repeat-y}* html .rmRoundedCorners_ASI .rmGroup .rmItem,* html .rmRoundedCorners_ASI ul.rmHorizontal .rmFirst{background-image:url('Menu/rmVSprite.png');background-color:#fff;background-repeat:repeat-y}.RadMenu_ASI .rmRoundedCorners .rmScrollWrapContainer .rmGroup,.RadMenu_ASI .rmRoundedCorners .rmScrollWrap .rmItem,.RadMenu_ASI .rmRoundedCorners .rmGroupColumn .rmItem,.RadMenu_ASI .rmRoundedCorners .rmGroupColumn .rmGroupColumn .rmItem,.RadMenu_ASI .rmRoundedCorners .rmHorizontal .rmItem,.RadMenu_ASI .rmRoundedCorners .rmScrollWrap .rmVertical,.RadMenu_ASI_Context.rmRoundedCorners .rmScrollWrapContainer .rmGroup,.RadMenu_ASI_Context.rmRoundedCorners .rmScrollWrap .rmItem,.RadMenu_ASI_Context.rmRoundedCorners .rmHorizontal .rmItem,.RadMenu_ASI_Context.rmRoundedCorners .rmScrollWrap .rmVertical{background-image:none}* html .rmRoundedCorners_ASI .rmScrollWrapContainer .rmGroup,* html .rmRoundedCorners_ASI .rmScrollWrap .rmItem,* html .rmRoundedCorners_ASI .rmHorizontal .rmItem,* html .rmRoundedCorners_ASI .rmScrollWrap .rmVertical{background-image:none}.RadMenu_ASI .rmRoundedCorners .rmGroupColumn{background-color:#fff}.RadMenu_ASI .rmBottomLeft,.RadMenu_ASI .rmRoundedCorners .rmScrollWrapContainer,.RadMenu_ASI_Context.rmRoundedCorners .rmScrollWrapContainer,.RadMenu_ASI_Context.rmRoundedCorners ul.rmGroup,.RadMenu_ASI .rmRoundedCorners ul.rmGroup,.RadMenu_ASI .rmRoundedCorners .rmMultiColumn{background-image:url('Menu/rmRoundedLeft.png');background-color:transparent;background-repeat:no-repeat}* html .rmRoundedCorners_ASI .rmScrollWrapContainer,* html .rmRoundedCorners_ASI .rmGroup ul.rmGroup,* html .rmRoundedCorners_ASI ul.rmGroup{background-image:url('Menu/rmRoundedLeft.png');background-color:transparent;background-repeat:no-repeat}.RadMenu_ASI .rmTopRight,.RadMenu_ASI .rmBottomRight{background-image:url('Menu/rmRoundedRight.png');background-color:transparent;background-repeat:no-repeat}.RadMenu_ASI .rmTopFix,.RadMenu_ASI .rmBottomFix,.RadMenu_ASI .rmRoundedCorners .rmGroup .rmFirst,.RadMenu_ASI_Context.rmRoundedCorners .rmGroup .rmFirst,.rmRoundedCorners_ASI .rmGroup .rmFirst{border-color:#979797}.RadMenu_ASI .rmRoundedCorners .rmScrollWrapContainer .rmTopFix,.RadMenu_ASI .rmRoundedCorners .rmScrollWrapContainer .rmBottomFix,.RadMenu_ASI_Context.rmRoundedCorners .rmScrollWrapContainer .rmTopFix,.RadMenu_ASI_Context.rmRoundedCorners .rmScrollWrapContainer .rmBottomFix{background:#FFF}* html .rmRoundedCorners_ASI .rmScrollWrapContainer .rmTopFix,* html .rmRoundedCorners_ASI .rmScrollWrapContainer .rmBottomFix{background:#FFF}.RadMenu_ASI .rmRoundedCorners .rmScrollWrapContainer .rmTopArrow,.RadMenu_ASI .rmRoundedCorners .rmScrollWrapContainer .rmBottomArrow,.RadMenu_ASI .rmRoundedCorners .rmScrollWrapContainer .rmLeftArrow,.RadMenu_ASI .rmRoundedCorners .rmScrollWrapContainer .rmRightArrow,.RadMenu_ASI_Context.rmRoundedCorners .rmScrollWrapContainer .rmTopArrow,.RadMenu_ASI_Context.rmRoundedCorners .rmScrollWrapContainer .rmBottomArrow,.RadMenu_ASI_Context.rmRoundedCorners .rmScrollWrapContainer .rmLeftArrow,.RadMenu_ASI_Context.rmRoundedCorners .rmScrollWrapContainer .rmRightArrow{background-color:#FFF;border:0}* html .rmRoundedCorners_ASI .rmScrollWrapContainer .rmTopArrow,* html .rmRoundedCorners_ASI .rmScrollWrapContainer .rmBottomArrow,* html .rmRoundedCorners_ASI .rmScrollWrapContainer .rmLeftArrow,* html .rmRoundedCorners_ASI .rmScrollWrapContainer .rmRightArrow{background-color:#FFF;border:0}.RadMenu_ASI_rtl .rmBottomLeft,.RadMenu_ASI_rtl .rmRoundedCorners ul.rmGroup,.RadMenu_ASI_rtl .rmRoundedCorners .rmMultiColumn,.RadMenu_ASI .rmRoundedCorners .rmScrollWrapContainer,.RadMenu_ASI .rmScrollWrapContainer .rmBottomLeft,.rmRoundedCorners.RadMenu_ASI_Context_rtl ul.rmGroup,.RadMenu_ASI_Context.rmRoundedCorners .rmScrollWrapContainer{background-image:url('Menu/rmRoundedLeft_rtl.png')}.RadMenu_ASI_rtl .rmTopRight,.RadMenu_ASI_rtl .rmBottomRight{background-image:url('Menu/rmRoundedRight_rtl.png')}.RadMenu_ASI_rtl li.rmTopFix,.RadMenu_ASI_rtl li.rmBottomFix,.RadMenu_ASI_rtl .rmRoundedCorners .rmGroup .rmItem,.rmRoundedCorners.RadMenu_ASI_Context_rtl .rmGroup .rmItem{background-position:101% 0}.RadMenu_ASI .rmSlide .rmScrollWrap{background-image:none}.RadMenu_ASI_rtl .rmGroup,.RadMenu_ASI_rtl .rmMultiColumn,.RadMenu_ASI_rtl .rmGroup .rmVertical{background-position:100% 0}.RadMenu_ASI .rmRootGroup li.rmItem .rmGroup{padding-bottom:0}.RadMenu_ASI .rmRootGroup .rmHorizontal{background-image:none}.RadMenu_ASI .rmScrollWrap .rmVertical{border:0}.RadMenu_ASI .rmRoundedCorners .rmScrollWrapContainer li.rmItem,.RadMenu_ASI_Context.rmRoundedCorners .rmScrollWrapContainer li.rmItem,.rmRoundedCorners_ASI .rmScrollWrapContainer li.rmItem{background:0}.RadMenu_ASI .rmGroup .rmItem a.rmLink,.RadMenu_ASI .rmGroup .rmItem a.rmLink:hover,.RadMenu_ASI .rmGroup .rmItem a.rmFocused,.RadMenu_ASI .rmGroup .rmItem a.rmSelected,.RadMenu_ASI .rmGroup .rmItem a.rmExpanded{padding-top:0;padding-bottom:0;border:0}.RadMenu_ASI .rmGroup .rmLast a.rmLink,.RadMenu_ASI .rmGroup .rmLast a.rmLink:hover,.RadMenu_ASI .rmGroup .rmLast a.rmFocused,.RadMenu_ASI .rmGroup .rmLast a.rmSelected,.RadMenu_ASI .rmGroup .rmLast a.rmExpanded{padding-bottom:1px}.RadMenu_ASI .rmGroup a.rmLink,.RadMenu_ASI .rmGroup .rmText,.RadMenu_ASI .rmGroup .rmItem a.rmDisabled,.RadMenu_ASI .rmGroup .rmItem a.rmDisabled:hover,.RadMenu_ASI .rmGroup .rmItem a.rmDisabled .rmText,.RadMenu_ASI .rmGroup .rmItem a.rmDisabled:hover .rmText{background-position:0 500px;background-repeat:no-repeat;background-color:transparent}.RadMenu_ASI .rmGroup a.rmLink:hover,.RadMenu_ASI .rmGroup a.rmFocused,.RadMenu_ASI .rmGroup a.rmSelected,.RadMenu_ASI .rmGroup a.rmExpanded{background-position:0 -168px}.RadMenu_ASI .rmGroup a.rmLink:hover .rmText,.RadMenu_ASI .rmGroup a.rmFocused .rmText,.RadMenu_ASI .rmGroup a.rmSelected .rmText,.RadMenu_ASI .rmGroup a.rmExpanded .rmText{background-position:100% -192px}.RadMenu_ASI .rmRootGroup .rmExpandRight,.RadMenu_ASI .rmGroup .rmExpandDown,.RadMenu_ASI_Context .rmGroup .rmExpandRight,.RadMenu_ASI .rmRootGroup .rmItem a.rmDisabled .rmExpandRight,.RadMenu_ASI .rmGroup .rmItem a.rmDisabled .rmExpandDown,.RadMenu_ASI .rmRootGroup .rmItem a.rmDisabled:hover .rmExpandRight,.RadMenu_ASI .rmGroup .rmItem a.rmDisabled:hover .rmExpandDown{background-position:100% -216px}.RadMenu_ASI a.rmLink:hover .rmExpandRight,.RadMenu_ASI .rmLast a.rmLink:hover .rmExpandRight,.RadMenu_ASI a.rmFocused .rmExpandRight,.RadMenu_ASI a.rmSelected .rmExpandRight,.RadMenu_ASI a.rmExpanded .rmExpandRight{background-position:100% -312px}.RadMenu_ASI .rmGroup a.rmLink:hover .rmExpandRight,.RadMenu_ASI .rmGroup a.rmFocused .rmExpandRight,.RadMenu_ASI .rmGroup a.rmSelected .rmExpandRight,.RadMenu_ASI .rmGroup a.rmExpanded .rmExpandRight,.RadMenu_ASI .rmGroup a.rmLink:hover .rmExpandDown,.RadMenu_ASI .rmGroup a.rmFocused .rmExpandDown,.RadMenu_ASI .rmGroup a.rmSelected .rmExpandDown,.RadMenu_ASI .rmGroup a.rmExpanded .rmExpandDown{background-position:100% -240px}.RadMenu_ASI .rmRootGroup a.rmDisabled:hover .rmExpandRight,.RadMenu_ASI .rmGroup a.rmDisabled:hover .rmExpandDown{background-image:url('Menu/rmSprite.png');background-position:100% -216px}.RadMenu_ASI_rtl a.rmLink,.RadMenu_ASI_rtl .rmRootGroup a.rmDisabled{background-position:100% -96px}.RadMenu_ASI_rtl .rmGroup a.rmDisabled{background:0}.RadMenu_ASI_rtl .rmText{background-position:0 -96px}.RadMenu_ASI_rtl .rmVertical a.rmExpanded .rmText,.RadMenu_ASI_rtl .rmVertical a.rmExpanded:hover .rmText{background-position:0 500px;background-repeat:no-repeat}.RadMenu_ASI_rtl .rmGroup a.rmLink:hover,.RadMenu_ASI_rtl .rmGroup a.rmFocused,.RadMenu_ASI_rtl .rmGroup a.rmSelected,.RadMenu_ASI_rtl .rmGroup a.rmExpanded{background-position:100% -264px}.RadMenu_ASI_rtl .rmGroup a.rmLink:hover .rmText,.RadMenu_ASI_rtl .rmGroup a.rmFocused .rmText,.RadMenu_ASI_rtl .rmGroup a.rmSelected .rmText,.RadMenu_ASI_rtl .rmGroup a.rmExpanded .rmText{background-position:0 -288px}.RadMenu_ASI_Context_rtl .rmVertical .rmExpandLeft,.RadMenu_ASI_rtl .rmRootGroup .rmExpandLeft{background-position:0 -312px}.RadMenu_ASI_rtl .rmVertical a.rmLink:hover .rmExpandLeft,.RadMenu_ASI_rtl .rmVertical a.rmFocused .rmExpandLeft,.RadMenu_ASI_rtl .rmVertical a.rmSelected .rmExpandLeft,.RadMenu_ASI_rtl .rmVertical a.rmExpanded .rmExpandLeft{background-position:0 -216px}.RadMenu_ASI_rtl .rmGroup a.rmLink:hover .rmExpandLeft,.RadMenu_ASI_rtl .rmGroup a.rmFocused .rmExpandLeft,.RadMenu_ASI_rtl .rmGroup a.rmSelected .rmExpandLeft,.RadMenu_ASI_rtl .rmGroup a.rmExpanded .rmExpandLeft{background-position:0 -336px}.RadMenu_ASI_rtl .rmRootGroup a.rmDisabled:hover .rmExpandLeft{background-position:0 -312px}.RadMenu_ASI .rmSlide{margin:0 0 0 -1px}.RadMenu_ASI .rmVertical .rmSlide,.RadMenu_ASI .rmSlide .rmSlide,.RadMenu_ASI_Context .rmGroup .rmSlide{margin:0 0 0 -5px}.RadMenu_ASI_rtl .rmSlide{margin:0}.RadMenu_ASI_rtl .rmFirst .rmSlide{margin-left:1px}.RadMenu_ASI_rtl .rmVertical .rmSlide,.RadMenu_ASI_rtl .rmSlide .rmSlide,.RadMenu_ASI_Context_rtl .rmGroup .rmSlide{margin:0 0 0 5px}.RadMenu_ASI .rmLeftArrow,.RadMenu_ASI .rmRightArrow{background-color:#E6E6E6}.RadMenu_ASI .rmLeftArrow{background-position:-8px -312px;border-right:1px solid #828282}.RadMenu_ASI .rmRightArrow{background-position:-482px -216px;border-left:1px solid #828282}.RadMenu_ASI .rmTopArrow,.RadMenu_ASI .rmBottomArrow,.RadMenu_ASI .rmGroup .rmLeftArrow,.RadMenu_ASI .rmGroup .rmRightArrow{background-color:#E6E6E6}.RadMenu_ASI .rmTopArrow{background-position:50% -367px;border-bottom:1px solid #828282}.RadMenu_ASI .rmBottomArrow{background-position:50% -391px;border-top:1px solid #828282}.RadMenu_ASI .rmHorizontal .rmSeparator .rmText,.RadMenu_ASI .rmVertical .rmHorizontal .rmSeparator .rmText{height:22px;margin:1px 0 0;width:1px;background-color:#A8A8A8}
    .RadMenu_ASI_Context .rmSeparator .rmText,.RadMenu_ASI .rmHorizontal .rmGroup .rmSeparator .rmText,.RadMenu_ASI .rmVertical .rmHorizontal .rmGroup .rmSeparator .rmText{background-color:transparent;background-position:0 -406px}
     
     DIV.RadMenu_ASI .rmItem .rmLink {
        FONT-SIZE: 14px;
        font-family: Crete Round !important;
        BACKGROUND-IMAGE: none;
        /*BACKGROUND-POSITION: 0px 500px;*/
        FONT-WEIGHT: normal;
        COLOR: #FFFFFF;
        LINE-HEIGHT: 50px;
        BACKGROUND-COLOR: #001F45;
    }
     
     DIV.RadMenu_ASI .rmItem .rmLink:hover {
        FONT-WEIGHT: bold;
    }
     
     DIV.RadMenu_ASI .rmItem .rmLink:hover .rmText {
        BACKGROUND-IMAGE: none;
    }
     
     DIV.RadMenu_ASI .rmItem .rmLink .rmExpandDown {
        FONT-WEIGHT: normal;
        /*BACKGROUND-COLOR: #6D9C1F;*/
        background: linear-gradient(to bottom, #290448 0%,#140224 44%,#040008 100%) !important ;
    }
     
     DIV.RadMenu_ASI .rmItem .rmGroup {
        BACKGROUND-IMAGE: none;
    }
     
     DIV.RadMenu_ASI .rmGroup .rmItem .rmLink {
        BACKGROUND-COLOR: #6D9C1F;
    }
     
     DIV.RadMenu_ASI .rmGroup .rmItem .rmLink:hover {
        FONT-WEIGHT: bold;
        BACKGROUND-COLOR: #87AE47;
    }
            
  2. Kurt Kluth
    Kurt Kluth avatar
    144 posts
    Member since:
    Oct 2009

    Posted 20 Nov 2013 Link to this post

    I got the menu working like it should, however I am now perplexed on how to solve one last problem. 

    There is a almost like an "invisible" border or cell padding surrounding the expanded menu items.  How do I go about turning this off so the group is right below the rootgroup? 

    Also is there anyway of shrinking the line height of submenu's?  ie. "Add, Edit, or View your financial statement", "Upload Form 5300".  I want the main rootGroup to be 50px high but the sub's to be smaller.

    See picture for specifics.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Kate
    Admin
    Kate avatar
    1898 posts

    Posted 21 Nov 2013 Link to this post

    Hi Kurt,

    I tested the code that you provided in your first post and I get the result demonstrated in the attached image file. Let me know on the changes that you included in order to get the look that you demonstrate on your last post.

    Regards,
    Kate
    Telerik
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to the blog feed now.
  5. Kurt Kluth
    Kurt Kluth avatar
    144 posts
    Member since:
    Oct 2009

    Posted 21 Nov 2013 Link to this post

    Kate,

    That thought did cross my mind that I should have provided further code.  Here you are.

    RadGridMenu: 
    <telerik:RadMenu ID="RadMenu1" runat="server" Width="100%"
        EnableRoundedCorners="True" EnableShadows="False" EnableTextHTMLEncoding="True"
        style="z-index:2900;" cssclass="RadMenu_ASI" EnableEmbeddedSkins="false">
        <Items>
            <telerik:RadMenuItem runat="server" NavigateUrl="~/finStatement/default.aspx"
                Text="Data Submission">
                <Items>
                    <telerik:RadMenuItem runat="server" NavigateUrl="~/finStatement/fsDefault.aspx"
                        Text="Add, Edit, or View Your Financial Statement">
                    </telerik:RadMenuItem>
                    <telerik:RadMenuItem runat="server"
                        NavigateUrl="~/finStatement/dataUpload.aspx?format=NCUA"
                        Text="Upload Form 5300">
                    </telerik:RadMenuItem>
                    <telerik:RadMenuItem runat="server"
                        NavigateUrl="~/finStatement/dataUpload.aspx?format=INS"
                        Text="Upload Excess Insured Accounts File">
                    </telerik:RadMenuItem>
                    <telerik:RadMenuItem runat="server"
                        NavigateUrl="~/finStatement/InsDescription.aspx"
                        Text="Excess Insured Account File Layout">
                    </telerik:RadMenuItem>
                </Items>
            </telerik:RadMenuItem>
            <telerik:RadMenuItem runat="server"
                NavigateUrl="~/premiumPayments/default.aspx" Text="Premium Payment System">
                <Items>
                    <telerik:RadMenuItem runat="server"
                        NavigateUrl="~/premiumPayments/demo/SlideShow.aspx"
                        Text="Demo - Premium Payment System ">
                    </telerik:RadMenuItem>
                    <telerik:RadMenuItem runat="server" NavigateUrl="~/premiumPayments/pps.aspx"
                        Text="Premium Payment System Login ">
                    </telerik:RadMenuItem>
                </Items>
            </telerik:RadMenuItem>
        </Items>
         
    </telerik:RadMenu>


    CSS:
    DIV.RadMenu_ASI .rmRootGroup
    {
        Background: linear-gradient(to bottom, #290448 0%,#140224 44%,#040008 100%) !important ;
    }
     
    DIV.RadMenu_ASI .rmRootGroup .rmLink
    {
        FONT-SIZE: 12px;
        font-family: Crete Round !important;
        COLOR: #FFFFFF !important;
        LINE-HEIGHT: 50px !important;
        BACKGROUND-IMAGE: none;
    }
     
    DIV.RadMenu_ASI .rmRootGroup .rmText
    {
        FONT-SIZE: 12px;
        font-family: Crete Round !important;
        COLOR: #FFFFFF !important;
        LINE-HEIGHT: 50px !important;
        BACKGROUND-IMAGE: none;
    }
     
    DIV.RadMenu_ASI .rmRootGroup .rmLink:hover
    {
        FONT-SIZE: 12px;
        font-family: Crete Round !important;
        COLOR: #FFFFFF !important;
        LINE-HEIGHT: 50px !important;
        BACKGROUND-IMAGE: none;
        background-color: #6d9c1f !important;
    }
     
    DIV.RadMenu_ASI .rmRootGroup .rmExpanded
    {
        BACKGROUND-IMAGE: none;
        background-color: #6d9c1f !important;
    }
     
    DIV.RadMenu_ASI .rmGroup .rmItem
    {
        border: 10px 10px 1px 1px solid #ffffff !important;
        line-height: 20px !important;
    }
     
    DIV.RadMenu_ASI .rmGroup .rmLink
    {
        FONT-SIZE: 12px;
        font-family: Crete Round !important;
        COLOR: #FFFFFF !important;
        BACKGROUND-IMAGE: none;
        background-color: #6d9c1f !important;
    }
     
    DIV.RadMenu_ASI .rmGroup .rmLink:hover
    {
        FONT-SIZE: 12px;
        font-family: Crete Round !important;
        COLOR: #FFFFFF !important;
        BACKGROUND-IMAGE: none;
        background-color: #87AE47 !important;
        width: 90%;
    }
  6. Answer
    Shinu
    Shinu avatar
    17764 posts
    Member since:
    Mar 2007

    Posted 21 Nov 2013 Link to this post

    Hi Kury

    Try setting the following CSS and I have attached a screenshot as well.
    Check the attached screenshot hope this is what you want
    CSS:
    <style type="text/css">
     .rmRoundedCorners ul.rmGroup
      {
        padding: 0px !important;
        margin-top: 0px !important;
      }
    </style>

    Thanks
    Shinu
  7. Kurt Kluth
    Kurt Kluth avatar
    144 posts
    Member since:
    Oct 2009

    Posted 21 Nov 2013 Link to this post

    That worked, now how do I get rid of the bar at the bottom?

    Tried adding and it didn't seem to make a difference.

    margin-bottom: 0px !important;
  8. Answer
    Kate
    Admin
    Kate avatar
    1898 posts

    Posted 21 Nov 2013 Link to this post

    Hi Kurt,

    To resolve the issue that you are currently experiencing you will need to disable the rounded corners and the shadows of the RadMenu (EnableRoundedCorners="false" EnableShadows="false") and you can also use the following css class selector (you will need to change the name of the skin in case you use any other than the Sunset skin):
    div.RadMenu_Sunset .rmGroup,
    div.RadMenu_Sunset .rmMultiColumn,
    div.RadMenu_Sunset .rmGroup .rmVertical {
                border: 0 solid #958A85;
            }


    Regards,
    Kate
    Telerik
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to the blog feed now.
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017