RadMenu for ASP.NET
Table of Contents
Scrollable menu Send comments on this topic.
See Also
Feature overview > Scrollable menu

Glossary Item Box

An expanded group of child items automatically becomes scrollable in case its width or height (depending on their flow) is too small to accommodate the whole group.

  • If the RadMenuItem.GroupSettings.Height property is specified and the size of the content exceeds that height, vertical scrolling will be enabled.
  • If the RadMenuItem.GroupSettings.Width property is specified and the size of the content exceeds that width, horizontal scrolling will be enabled.

Example

The menu in Pic. 1 below has three root items. The first two are scrollable. The Flow property for each group is set so that the first group scrolls horizontally, while the second one is vertical.

Pic. 1

A scrollable menu

ASPX Copy Code
<rad:radmenu id="RadMenu1" runat="server" Skin="Outlook">
   <Items>
       <rad:RadMenuItem Text="Corporate">
           <GroupSettings Height="100px"></GroupSettings>
           <Items>
               <rad:RadMenuItem Text="Mission Statement"></rad:RadMenuItem>
               <rad:RadMenuItem Text="Strategic Plan"></rad:RadMenuItem>
               <rad:RadMenuItem Text="Executive Bios"></rad:RadMenuItem>
               <rad:RadMenuItem Text="Contact Us"></rad:RadMenuItem>
               <rad:RadMenuItem Text="Careers"></rad:RadMenuItem>
               <rad:RadMenuItem Text="Client Highlights"></rad:RadMenuItem>
               <rad:RadMenuItem Text="By Email"></rad:RadMenuItem>
           </Items>
       </rad:RadMenuItem>
       <rad:RadMenuItem Text="Products">
           <GroupSettings Width="200px" Flow="Horizontal"></GroupSettings>
           <Items>
               <rad:RadMenuItem Text="Automotive"></rad:RadMenuItem>
               <rad:RadMenuItem Text="Machinery"></rad:RadMenuItem>
               <rad:RadMenuItem Text="Software"></rad:RadMenuItem>
               <rad:RadMenuItem Text="Customer Goods"></rad:RadMenuItem>
           </Items>
       </rad:RadMenuItem>
       <rad:RadMenuItem Text="Contact Us">
           <Items>
               <rad:RadMenuItem Text="Europe"></rad:RadMenuItem>
               <rad:RadMenuItem Text="Asia"></rad:RadMenuItem>
               <rad:RadMenuItem Text="America"></rad:RadMenuItem>
           </Items>
       </rad:RadMenuItem>
   </Items>
</rad:radmenu>
        

See Also