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

Telerik like Menu

7 Answers 14 Views
General Discussions
This is a migrated thread and some comments may be shown as answers.
MBEN
Top achievements
Rank 1
Veteran
MBEN asked on 30 Jan 2014, 06:12 PM
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.

7 Answers, 1 is accepted

Sort by
0
Kate
Telerik team
answered on 03 Feb 2014, 09:39 AM
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
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 UI for ASP.NET AJAX, subscribe to the blog feed now.
0
MBEN
Top achievements
Rank 1
Veteran
answered on 03 Feb 2014, 05:40 PM
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.
0
Kate
Telerik team
answered on 05 Feb 2014, 11:56 AM
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
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 UI for ASP.NET AJAX, subscribe to the blog feed now.
0
MBEN
Top achievements
Rank 1
Veteran
answered on 10 Feb 2014, 05:50 PM
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.
0
Shinu
Top achievements
Rank 1
answered on 11 Feb 2014, 04:17 AM
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.
0
MBEN
Top achievements
Rank 1
Veteran
answered on 13 Feb 2014, 06:56 PM
I am using custom skin. How can i specify the css for the menu item in the skin file?
0
Kate
Telerik team
answered on 18 Feb 2014, 11:15 AM
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
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 UI for ASP.NET AJAX, subscribe to the blog feed now.
Tags
General Discussions
Asked by
MBEN
Top achievements
Rank 1
Veteran
Answers by
Kate
Telerik team
MBEN
Top achievements
Rank 1
Veteran
Shinu
Top achievements
Rank 1
Share this question
or