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

Splitting a menu into groups

1 Answer 50 Views
Menu
This is a migrated thread and some comments may be shown as answers.
MB
Top achievements
Rank 1
MB asked on 18 Jan 2008, 05:11 AM
I have an application using a horizontal menu, where I need to split the root items at a certain point, with some aligned to the left of the container, and the rest aligned to the right of the container.

e.g. Standard menu items on the left, Help and Login items on the right... with the menu stretching over the container. Like...

Item-1 | Item-2 | Item-3                                      | Item-4 | Item-5

Obviously I can achieve this with multiple menus, but I thought there is probably a more elegent way to manage this... and I'm simply not looking in the right place.

1 Answer, 1 is accepted

Sort by
0
T. Tsonev
Telerik team
answered on 18 Jan 2008, 01:57 PM
Hi Mike,

We can insert a "spacer" item that will push the next items to the right. We can create such an item by placing a div tag with the required width in the ItemTemplate:

<telerik:RadMenu ID="RadMenu1" runat="server" Skin="Telerik"
    <Items> 
        <telerik:RadMenuItem Text="About us"
            <Items> 
                <telerik:RadMenuItem Text="Mission Statement"
                </telerik:RadMenuItem> 
                <telerik:RadMenuItem Text="Strategic Plan"
                </telerik:RadMenuItem> 
                <telerik:RadMenuItem Text="Executive Bios"
                </telerik:RadMenuItem> 
                <telerik:RadMenuItem Text="Contact Us"
                </telerik:RadMenuItem> 
            </Items> 
        </telerik:RadMenuItem> 
        <telerik:RadMenuItem Text="Products"
            <Items> 
                <telerik:RadMenuItem Text="Automotive"
                </telerik:RadMenuItem> 
                <telerik:RadMenuItem Text="Machinery"
                </telerik:RadMenuItem> 
                <telerik:RadMenuItem Text="Software"
                </telerik:RadMenuItem> 
                <telerik:RadMenuItem Text="Customer Goods"
                </telerik:RadMenuItem> 
            </Items> 
        </telerik:RadMenuItem> 
        <telerik:RadMenuItem> 
            <ItemTemplate> 
                <!-- Spacer --> 
                <div style="width: 100px"
                    &nbsp; 
                </div> 
            </ItemTemplate> 
        </telerik:RadMenuItem> 
        <telerik:RadMenuItem Text="Contact Us"
            <Items> 
                <telerik:RadMenuItem Text="Europe"
                </telerik:RadMenuItem> 
                <telerik:RadMenuItem Text="Asia"
                </telerik:RadMenuItem> 
                <telerik:RadMenuItem Text="America"
                </telerik:RadMenuItem> 
            </Items> 
        </telerik:RadMenuItem> 
    </Items> 
</telerik:RadMenu> 
 


Sincerely yours,
Tsvetomir Tsonev
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center
Tags
Menu
Asked by
MB
Top achievements
Rank 1
Answers by
T. Tsonev
Telerik team
Share this question
or