This is a migrated thread and some comments may be shown as answers.

RadMenu Style

5 Answers 128 Views
This is a migrated thread and some comments may be shown as answers.
Julie
Top achievements
Rank 1
Julie asked on 30 May 2012, 10:22 AM
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

5 Answers, 1 is accepted

Sort by
0
Shinu
Top achievements
Rank 1
answered on 30 May 2012, 01:45 PM
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.
0
Julie
Top achievements
Rank 1
answered on 30 May 2012, 02:23 PM
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
0
Kate
Telerik team
answered on 31 May 2012, 08:50 AM
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.
0
Julie
Top achievements
Rank 1
answered on 31 May 2012, 09:18 AM
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
0
Kate
Telerik team
answered on 04 Jun 2012, 05:37 PM
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.
Tags
Menu
Asked by
Julie
Top achievements
Rank 1
Answers by
Shinu
Top achievements
Rank 1
Julie
Top achievements
Rank 1
Kate
Telerik team
Share this question
or