Splitting a menu into groups

2 posts, 0 answers
  1. MB
    MB avatar
    149 posts
    Member since:
    Jan 2005

    Posted 17 Jan 2008 Link to this post

    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.
  2. T. Tsonev
    Admin
    T. Tsonev avatar
    2809 posts

    Posted 18 Jan 2008 Link to this post

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