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

position layout box of child menu

1 Answer 90 Views
Menu
This is a migrated thread and some comments may be shown as answers.
Ernst Sognnes
Top achievements
Rank 1
Ernst Sognnes asked on 19 Aug 2009, 06:09 PM
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

1 Answer, 1 is accepted

Sort by
0
T. Tsonev
Telerik team
answered on 25 Aug 2009, 06:27 AM
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.
Tags
Menu
Asked by
Ernst Sognnes
Top achievements
Rank 1
Answers by
T. Tsonev
Telerik team
Share this question
or