Telerik like Menu

[MBEN]

I am working with RadMenu and I could not get my menus the way I want them to look like.
I want my menus to look like the menus on the telerik website. Only when I dropdown I need to show sub menu items. Can you help me with the skin.

I am attaching an image of what my menu looks like.

[Kate]

Hi,

I can suggest that you refer to the following article where it is describe in details how you can alter the look of the RadMenu control. Let me know if this is the desired look or if if you are trying to get any other effect with the RadMenu - How to Build Telerik.com-like Navigation with Telerik’s ASP.NET Menu Control.

Regards,
Kate
Telerik

[MBEN]

The menu effect I was looking for is the one on the top of this page with all the tabs.
I wasn't sure if they were a tabstrip or menu though.

[Kate]

Hello,

Can you please provide and image file of the exact menu that you are referring to so I can get a better understanding of the particular scenario that you need to achieve?

Regards,
Kate
Telerik

[MBEN]

i am attaching an image of the Telerik menu i am referencing to.
The menu that i get do not spread across the width of the page.

[Shinu]

Hi MBEN,

Please have a look into the following sample code snippet.

ASPX:

<telerik:RadMenu ID="RadMenu1" runat="server" Skin="Black">
    <Items>
        <telerik:RadMenuItem Text="Telerik" Width="300px" Style="left: 75px;">
        </telerik:RadMenuItem>
        <telerik:RadMenuItem IsSeparator="true">
        </telerik:RadMenuItem>
        <telerik:RadMenuItem Text="Products" CssClass="menuitem">
        </telerik:RadMenuItem>
        <telerik:RadMenuItem IsSeparator="true">
        </telerik:RadMenuItem>
        <telerik:RadMenuItem Text="Enterprise" CssClass="menuitem">
        </telerik:RadMenuItem>
        <telerik:RadMenuItem IsSeparator="true">
        </telerik:RadMenuItem>
        <telerik:RadMenuItem Text="Free Trials" CssClass="menuitem">
        </telerik:RadMenuItem>
        <telerik:RadMenuItem IsSeparator="true">
        </telerik:RadMenuItem>
        <telerik:RadMenuItem Text="Pricing" Width="70px" Style="left: 8px;">
        </telerik:RadMenuItem>
        <telerik:RadMenuItem IsSeparator="true">
        </telerik:RadMenuItem>
        <telerik:RadMenuItem Text="Support & Learning" Width="150px" Style="left: 15px">
        </telerik:RadMenuItem>
        <telerik:RadMenuItem IsSeparator="true">
        </telerik:RadMenuItem>
        <telerik:RadMenuItem Text="Company" CssClass="menuitem">
        </telerik:RadMenuItem>
        <telerik:RadMenuItem IsSeparator="true">
        </telerik:RadMenuItem>
        <telerik:RadMenuItem Text="Your Account" CssClass="menuitem">
        </telerik:RadMenuItem>
        <telerik:RadMenuItem IsSeparator="true">
        </telerik:RadMenuItem>
        <telerik:RadMenuItem Text="Telerik Platform" Width="150px" Style="left: 15px">
        </telerik:RadMenuItem>
        <telerik:RadMenuItem IsSeparator="true">
        </telerik:RadMenuItem>
        <telerik:RadMenuItem Width="500px">
        </telerik:RadMenuItem>
    </Items>
</telerik:RadMenu>

CSS:

<style type="text/css">
    .menuitem
    {
        width: 100px !important;
        left: 5px !important;
    }
</style>

Hope this will helps you.
Thanks,
Shinu.

[MBEN]

I am using custom skin. How can i specify the css for the menu item in the skin file?

[Kate]

Hello,

To apply a specific css class to only a single menu Item you can use the CssClass property of this item as fully explained in this help article.

Regards,
Kate
Telerik