RadMenu Style

[Julie]

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

[Shinu]

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.

[Julie]

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

[Kate]

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

[Julie]

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

[Kate]

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