Telerik like Menu

8 posts, 0 answers
  1. MBEN
    MBEN avatar
    203 posts
    Member since:
    Nov 2011

    Posted 30 Jan 2014 Link to this post

    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.
  2. Kate
    Admin
    Kate avatar
    1898 posts

    Posted 03 Feb 2014 Link to this post

    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.
  3. MBEN
    MBEN avatar
    203 posts
    Member since:
    Nov 2011

    Posted 03 Feb 2014 in reply to Kate Link to this post

    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.
  4. Kate
    Admin
    Kate avatar
    1898 posts

    Posted 05 Feb 2014 Link to this post

    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.
  5. MBEN
    MBEN avatar
    203 posts
    Member since:
    Nov 2011

    Posted 10 Feb 2014 in reply to Kate Link to this post

    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.
  6. Shinu
    Shinu avatar
    17764 posts
    Member since:
    Mar 2007

    Posted 10 Feb 2014 in reply to MBEN Link to this post

    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.
  7. MBEN
    MBEN avatar
    203 posts
    Member since:
    Nov 2011

    Posted 13 Feb 2014 in reply to Shinu Link to this post

    I am using custom skin. How can i specify the css for the menu item in the skin file?
  8. Kate
    Admin
    Kate avatar
    1898 posts

    Posted 18 Feb 2014 Link to this post

    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.
Back to Top