Adding round edges to drop down Navigation?

2 posts, 0 answers
  1. Brett
    Brett avatar
    1 posts
    Member since:
    Aug 2013

    Posted 13 Aug 2013 Link to this post

    How does one add a rounded bottom to one of the drop down navigation windows? I was working away at .RadMenu_Metro .rmGroup (I am working from the metro template) and am able to set a static height, but adding a bottom padding or something similar to add a background image just isn't working. Is there a way to do such things without styling another clickable button? Not all of my sub menus are the same length and I would like them not all to be.

    I want something similar to this: http://blog.karachicorner.com/blog-images/039/jquery-menus/jquery-drop-down-menus-1.jpg
    (again, just looking for the rounded corners on the bottom of the drop down menu)
  2. Shinu
    Shinu avatar
    17764 posts
    Member since:
    Mar 2007

    Posted 14 Aug 2013 Link to this post

    Hi Brett,

    Please try the following code snippet I have tried which works fine at my end.

    ASPX:
    <telerik:RadMenu ID="RadMenu1" runat="server" DefaultGroupSettings-Flow="Vertical"
        Skin="Metro">
        <Items>
            <telerik:RadMenuItem runat="server" Text="Item1">
                <GroupSettings ExpandDirection="Down" />
                <Items>
                    <telerik:RadMenuItem runat="server" Text="Item1.1">
                    </telerik:RadMenuItem>
                    <telerik:RadMenuItem runat="server" Text="Item1.2">
                    </telerik:RadMenuItem>
                    <telerik:RadMenuItem runat="server" Text="Item1.3">
                    </telerik:RadMenuItem>
                    <telerik:RadMenuItem runat="server" Text="Item1.3">
                    </telerik:RadMenuItem>
                </Items>
            </telerik:RadMenuItem>
        </Items>
    </telerik:RadMenu>

    CSS:
    <style type="text/css">
        .RadMenu_Metro .rmGroup
        {
            border-bottom-right-radius: 15px !important;
            border-bottom-left-radius: 15px !important;
        }
    </style>

    Thanks,
    Shinu.
  3. UI for ASP.NET Ajax is Ready for VS 2017
Back to Top