RadMenu Style

6 posts, 0 answers
  1. Julie
    Julie avatar
    8 posts
    Member since:
    Apr 2012

    Posted 30 May 2012 Link to this post

    Hi,

    I'm trying to make in CSS a single background, for expanded elements and the root element. (cf. Picture)
    But, I can't get both in the same class.



    When the rootItem is collapse the Css is :
    .MainMenu .rmHorizontal .rmRootLink
    {
    background: -moz-linear-gradient(center top , #E7E7E7, #FFFFFF) repeat scroll 0 0 #F9F9F9;
    background: #F9F9F9 -webkit-gradient(linear, 0% 0%, 0% 100%, color-stop(0%, #E7E7E7), color-stop(100%, white));
    background: #F9F9F9 -webkit-linear-gradient(top, #E7E7E7 0%, white 100%);
    background: #F9F9F9 linear-gradient(top, #E7E7E7 0%, white 100%);<br>...<br> 
    }


    I have the expanded item with that :
    .MainMenu .rmHorizontal .rmItem .rmSlide .rmVertical .rmItem a

    Thanks in advance
    Julie
  2.
  3. Shinu
    Shinu avatar
    17764 posts
    Member since:
    Mar 2007

    Posted 30 May 2012 Link to this post

    Hello Julie,

    Try the following CSS to achieve the required scenario
    aspx:
    <telerik:RadMenu ID="RadMenu1" runat="server" Flow="Vertical" Width="200px">
      <Items>
         <telerik:RadMenuItem Text="1">
             <Items>
                 <telerik:RadMenuItem Text="22">
                 </telerik:RadMenuItem>
                 <telerik:RadMenuItem Text="222">
                 </telerik:RadMenuItem>
             </Items>
          </telerik:RadMenuItem>
            <telerik:RadMenuItem Text="11">
            </telerik:RadMenuItem>
            <telerik:RadMenuItem Text="111">
            </telerik:RadMenuItem>
      </Items>
    </telerik:RadMenu>

    CSS:
    .RadMenu_Default .rmGroup
    {
      background-color:yellow !important;
      background-image:none !important;
    }
    .RadMenu_Default a.rmExpanded, .RadMenu_Default a.rmExpanded:hover
    {
      background-color:yellow !important;
    }

    Thanks,
    Shinu.
  5. Julie
    Julie avatar
    8 posts
    Member since:
    Apr 2012

    Posted 30 May 2012 Link to this post

    Hello Shinu !

    Thanks for the quick reply.
    I have try your solution, it's seems to work, but because my background is a color gradient, I have some issue with it.
    We can see that the background is two part ...

    Do you know a trick to have one on similar to one gradient ?




    Thank you,
    Julie
  7. Kate
    Admin
    Kate avatar
    1898 posts

    Posted 31 May 2012 Link to this post

    Hello Julie,

    I am not quite sure that I completely understand your scenario. Can you please elaborate on the appearance that you need to achieve? I would suggest that you open a support ticket where you can attach the following files that will help me replicate your scenario locally: the markup code or the aspx page, the images that you are using for background (I assume) and the style sheet that you apply. Thus I can test them locally and help you out. Can you also clarify if you are using only RadMenu control or you have a RadSiteMap control?

    Regards,
    Kate
    the Telerik team
    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 their blog feed now.
  9. Julie
    Julie avatar
    8 posts
    Member since:
    Apr 2012

    Posted 31 May 2012 Link to this post

    Hi Kate,

    The style I would like to have is this one,



    As you can see, the root level and expanded child have a color gradient background from grey to white.

    With the radMenu, I could not have one background for root and child. So, as you can see, we have a background for each. We can see a repetition of the gradient.



    I have no image. My aspx is the following :

    <asp:SiteMapDataSource ID="MainSiteMapDataSource" runat="server" SiteMapProvider="MenuUCommercial_LeftSitemap"
        ShowStartingNode="false" />
    <ubiCtrl:UbiRadMenu runat="server" ID="MainMenu" DataSourceID="MainSiteMapDataSource"
        EnableEmbeddedSkins="false" CssClass="MainMenu" />

    The CSS associate is :

    .MainMenu
    {
        display: block;
        text-align: center;
    }
     
    /* First line AllElements*/
    .MainMenu .rmHorizontal .rmRootLink
    {
        background: -moz-linear-gradient(center top , #E7E7E7, #FFFFFF) repeat scroll 0 0 #F9F9F9;
        background: #F9F9F9 -webkit-gradient(linear, 0% 0%, 0% 100%, color-stop(0%, #E7E7E7), color-stop(100%, white));
        background: #F9F9F9 -webkit-linear-gradient(top, #E7E7E7 0%, white 100%);
        background: #F9F9F9 linear-gradient(top, #E7E7E7 0%, white 100%);
     
        border-top: 1px solid #CCCCCC;
        border-right: 1px solid #CCCCCC;
        border-left: 1px solid #CCCCCC;
        border-radius: 8px 8px 0 0;
        -webkit-border-radius: 8px 8px 0px 0px;
        line-height: 23px;
        display: inline;
             
        width: 200px;
        z-index: 1;
     
        color: #666666;
        font-weight: bold;
        text-decoration: none;  
    }
     
    .RadMenu_Default .rmGroup
    {
        border-bottom: 1px solid #CCCCCC;
        border-right: 1px solid #CCCCCC;
        border-left: 1px solid #CCCCCC;
        border-radius: 0 0 8px 8px;
        -webkit-border-radius: 0 0  8px 8px;
    }
    .RadMenu_Default a.rmExpanded, .RadMenu_Default a.rmExpanded:hover
    {
     
        border-bottom: 1px solid #CCCCCC;
        border-right: 1px solid #CCCCCC;
        border-left: 1px solid #CCCCCC;
        border-radius: 8px 8px 0 0;
        -webkit-border-radius: 8px 8px 0px 0px;
    }
     
    .RadMenu_Default a.rmExpanded, .RadMenu_Default a.rmExpanded:hover,
    .RadMenu_Default .rmGroup
    {
        background: -moz-linear-gradient(center top , #E7E7E7, #FFFFFF) repeat scroll 0 0 #F9F9F9;
        background: #F9F9F9 -webkit-gradient(linear, 0% 0%, 0% 100%, color-stop(0%, #E7E7E7), color-stop(100%, white));
        background: #F9F9F9 -webkit-linear-gradient(top, #E7E7E7 0%, white 100%);
        background: #F9F9F9 linear-gradient(top, #E7E7E7 0%, white 100%);
    }
    .MainMenu .rmRootGroup .rmItem a
    {
        text-align: center !important;
    }
      
     
     
    .MainMenu .rmHorizontal .rmItem .rmSlide .rmVertical .rmItem a
    {
        width: 213px;
        color: #007F64;
        font-weight: normal;
        text-decoration: none:
    }
     
     
     
    .MainMenu .rmHorizontal .rmFirst
    {
        margin-left: 0;
    }
    div.MainMenu
    {
    }

    I hope you understand my problem better.
    Julie
  11. Kate
    Admin
    Kate avatar
    1898 posts

    Posted 04 Jun 2012 Link to this post

    Hello Julie,

    Thanks for clarifying. I could get a better understanding on the appearance that you need to achieve. However, in order to achieve the desired look I would suggest that you use a sprite image and apply it instead of the css styles that you currently have. I attach I simplified runnable project that demonstrates the approach. 

    Regards,
    Kate
    the Telerik team
    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 their blog feed now.
Back to Top