RadMenu and styling

[Ahmed Ilyas]

Hi there.
I am almost this close to buying the RadControls ASP.NET Ajax. I do however need to see if this will work.
Can someone kindly tell me how to style the menu items from:

http://demos.telerik.com/aspnet-ajax/menu/examples/appearance/imageonly/defaultcs.aspx?#qsf-demo-source

similar to the following:

http://www.stunicholls.com/menu/pro_dropdown_2.html 

I am not sure how the styling works and how to make it look very similar/close to that as possible. I would really appreciate any samples/advice on this.

Even the sample shown on the telerik demo page link above would be great, showing me all the styling colors, fonts, background etc... etc... but not using images (unless to make it a standing out/3D effect but have the menu name as text only)

Thanks again

[Princy]

Hi Ahmed,

I have tried a sample markup and CSS to achieve your scenario.Plese have a look into it and let me know your concern.
aspx:

<telerik:RadMenu ID="RadMenu1" runat="server" Height="40px">
   <Items>
     <telerik:RadMenuItem Text="Home">
     </telerik:RadMenuItem>
     <telerik:RadMenuItem Text="Products">
       <Items>
         <telerik:RadMenuItem Text="Cameras">
         </telerik:RadMenuItem>
         <telerik:RadMenuItem Text="Lenses">
         </telerik:RadMenuItem>
       </Items>
     </telerik:RadMenuItem>
     <telerik:RadMenuItem Text="Services">
         <Items>
            <telerik:RadMenuItem Text="Printing">
            </telerik:RadMenuItem>
            <telerik:RadMenuItem Text="PhotoFraming">
            </telerik:RadMenuItem>
         </Items>
     </telerik:RadMenuItem>
   </Items>
</telerik:RadMenu>

CSS:

<style type="text/css">
        .RadMenu_Default .rmRootGroup
        {
            background: #89a14c !important; /* Old browsers */
            background: linear-gradient(to bottom, #89a14c 0%,#8eb92a 50%,#72aa00 51%,#132c00 100%) !important; /* W3C */
            filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#89a14c', endColorstr='#132c00',GradientType=0 ) !important; /* IE6-9 */
            color: White !important;
        }

        .RadMenu_Default .rmGroup, .RadMenu_Default .rmMultiColumn, .RadMenu_Default .rmGroup .rmVertical
        {
            background: #BBD37E !important;
            color: White !important;
        }
        .RadMenu_Default .rmHorizontal .rmRootLink span.rmText:hover
        {
            background: #6A812C !important;
            color: White !important;
        }

        .RadMenu_Default a.rmExpanded, .RadMenu_Default a.rmExpanded:hover
        {
            background: #6A812C !important;
            color: White !important;
        }

        .RadMenu_Default .rmItem .rmFirst .rmLink .rmText:hover, .RadMenu_Default .rmItem .rmLast .rmLink .rmText:hover
        {
            background: #6A812C !important;
            color: White !important;
            background-image: none !important;
        }
    </style>

Thanks,
Princy.

[Ahmed Ilyas]

Excellent! Thank you very much.

Now, is there an alternative instead of using the DX effect (like using the image file as per the original menu system? or even the coloring?) Because I would like this to be supported by non IE browsers

Also, how about changing the Text color?

[Princy]

Hi Ahmed

Try the following CSS to achieve the same coloring to other browsers
CSS:

background: -moz-linear-gradient(top, #89a14c 0%, #8eb92a 50%, #72aa00 51%, #132c00 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#89a14c), color-stop(50%,#8eb92a), color-stop(51%,#72aa00), color-stop(100%,#132c00)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #89a14c 0%,#8eb92a 50%,#72aa00 51%,#132c00 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #89a14c 0%,#8eb92a 50%,#72aa00 51%,#132c00 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #89a14c 0%,#8eb92a 50%,#72aa00 51%,#132c00 100%); /* IE10+ */

If you want to use an image file as per the RadMenu skin then you need to create a custom skin of your own in Visual Style builder.
Please check the following documentation to get started
Creating a Custom skin

Inorder to change the text color try setting ForeColor property in the markup as shown below

<telerik:RadMenuItem Text="Products" ForeColor="White">
</telerik:RadMenuItem>

Thanks
Princy.

[Ahmed Ilyas]

Hi. So the suggestion worked for majority of the browsers including the gradient effect I wanted in IE 6-9:

.RadMenu_Default .rmRootGroup

{

background: #0072C6 !important; /* Old browsers */

background: linear-gradient(to bottom, #0072C6 0%,#8eb92a 50%,#72aa00 51%,#003A66 100%) !important; /* W3C */

filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0072C6', endColorstr='#003A66',GradientType=0 ) !important; /* IE6-9 */

color: White !important;

}


But now in IE10, this does not work. The gradient coloring is weird and I know that the W3C line above is causing the issue here.

how can I make it "right" for IE10?

[Princy]

Hi,

Try the following CSS.
CSS:

/* IE10 --add keyword -ms-*/
background-image: -ms-linear-gradient(left, #FFFFFF 0%, #00A3EF 100%);

Thanks,
Princy.