position layout box of child menu

2 posts, 0 answers
  1. Ernst Sognnes
    Ernst Sognnes avatar
    4 posts
    Member since:
    Apr 2009

    Posted 19 Aug 2009 Link to this post

    hi,

    I'm working on a RadMenu which has a horizontal layout (i.e. as shown in http://www.telerik.com/help/aspnet-ajax/menu_appearancelayoutofchilditems.html). Each submenu, if applicable, appears below when hovering on the root element. I have created a custom skin based off the included Web20 skin. I am only using 2 menu levels - root level and 1 submenu max each.

    How can I make the sub menu appear centered (the box itself) based on the width of the root element? Can I do this with CSS or do I have to get more sophisticated with jQuery etc? I have created the submenu element as a fixed width box with a graphic layout. I.e. the submenu box always has the same width.

    I have noticed all elements are "left aligned" to the root elements left edge when they appear. I know of OffsetX and OffsetY, but they only let me set a fixed value. I'd like to make this dynamic based on the individual root element's width. Is there a way to accomplish this?

    I'm using the latest RadControls for ASP.NET Ajax (v 2009.2 701)

    regards,
    Ernst
  2. T. Tsonev
    Admin
    T. Tsonev avatar
    2788 posts

    Posted 25 Aug 2009 Link to this post

    Hi,

    Thank you for the detailed description of your scenario. You can center the sub-menus with respect to their root items using only CSS. This is only possible if the width of the sub-menu is known, as in your case. We'll have to use JavaScript otherwise.

    <style type="text/css">
        div.RadMenu .item1 .rmSlide
        {
            left: 50% !important; /* We need !important, as left is rendered inline */
            margin-left: -50px; /* Half the width of the sub-menu of this item */
        }
    </style>

    The "item1" class that you see in the selector above must be applied to the outermost element (<LI>) of the menu item. This wasn't possible to do without using JavaScript, but we've added a property in the latest internal build (version 2009.2.825+) to do just that - OuterCssClass. You can download the latest build from your Client.NET account.

    <telerik:RadMenu ID="RadMenu1" runat="server" Skin="Web20">
        <Items>
            <telerik:RadMenuItem Text="-----====== Item 1 ======-----" OuterCssClass="item1">
                <GroupSettings Width="100px" />
                <Items>
                    <telerik:RadMenuItem Text="Item" />
                    <telerik:RadMenuItem Text="Item" />
                    <telerik:RadMenuItem Text="Item" />
                    <telerik:RadMenuItem Text="Item" />
                </Items>
            </telerik:RadMenuItem>
            <telerik:RadMenuItem Text="-----====== Item 2 ======-----">
                <GroupSettings Width="100px" />
                <Items>
                    <telerik:RadMenuItem Text="Item" />
                    <telerik:RadMenuItem Text="Item" />
                    <telerik:RadMenuItem Text="Item" />
                    <telerik:RadMenuItem Text="Item" />
                </Items>
            </telerik:RadMenuItem>
        </Items>
    </telerik:RadMenu>

    Centered

    I hope this helps.

    Greetings,
    Tsvetomir Tsonev
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Check out the tips for optimizing your support resource searches.
Back to Top