$99 VS $1000+. UI Control for ASP.NET AJAX(contains chart and gridview).
Menu Features for ASP.NET AJAX
Home > How to > Menu Features

In this guide, we will mainly focus on five important features provided by Kettic menu control, which can be used to create a flexible and custom menu into your Visual C# / Visual Basic .NET ASP.NET AJAX web project. Currently it supports .NET Framework 4.0 and above, as well as MS Visual Studio 2010 and later.
In the following sections, we are going to present a detailed introduction to five amazing features which you can utilize with Kettic menu UI control for ASP.NET AJAX. You can take a look at the list below to get a general idea.
  • Utilize toggle handling feature for better compatibility with mobile devices.
  • Utilize multi column feature for better child item displaying effect.
  • Utilize menu separators to add cosmetic effect for your menu items.
  • Utilize animations to control the appearance and disappearance for your menu items.
  • Utilize click to open feature to control menu expanding and collapsing behavior.

Toggle Handling in Menu

The first feature we are going to introduce to you is the toggle handling in menu. In general, the child items will display once their parent item is hovered with a mouse. While this might be helpful for you to access the web page from your personal computer, it is not that convenient when you access it from mobile devices such as iPhone, iPad, etc.
Now you can perfectly resolve this issue with this Toggle Handling feature to improve mobile device performance. The menu control property "ShowToggleHandling" is false by default. If you set it to true instead, a toggle button will appear for the items that have child items. This toggle button, once clicked or touched, will expand or collapse corresponding child items for a certain parent item.

Create a Multi Column Menu

The second menu feature being introduced here is the multi column menu item rendering. Using Kettic menu control for ASP.NET AJAX web application, web developer can create a custom menu with multiple columns, if you have too many child items to be displayed with one column.
Right now there are two properties related to this multi column menu rendering feature, which will help you to customize different aspects for this effect.
The first property is the RepeatColumns. This is an integer property, and you can set it to any number according to your item amount. Please note that when setting RepeatColumns to 1, it is not able to carry out multiple columns, as all items will be displayed in a single column.
The second property is RepeatDirection. Currently you can either set it to Horizontal or Vertical. When the property is set to Horizontal, the items will be rendered first from left to right, then from top to bottom. If you select Vertical, the items will be rendered first from top to bottom, then from left to right.

Add Separators in Menu

The third feature is that web developers can opt to add separators into your menu for cosmetic purpose. How can you add a separator in a menu? Please follow the steps below.
  • First you can create or add an item into your menu, which will be used to separator later.
  • Then you can set the IsSeparator property to true.
  • After that you can freely specify the separator size by setting the Width property.
  • Finally this separator is created easily!

Add Animation for Menu

Another feature we want to introduce to you is the animation effect. By default, when a user hover the mouse over a parent item, the corresponding child items will be displayed. Now Kettic menu control allows web developer to select from a variety of animation effect for the item expanding and collapsing. Here are a few related properties which you can set.
  • ExpandDelay: This property specifies the time between a mouse enters a parent item and the child items start to expand.
  • CollapseDelay: This property specifies the time between a mouse exits a parent item and the child items start to expand.
  • Duration: This property defines the time of effect duration (in milliseconds).
  • Type: This property allow you to specify a certain animation effect from 20+ types.

Click to Open a Menu

This property is used to specify that the menu items can only expand with the user clicking on a menu with a mouse, instead of hovering the mouse over the menu. And the same goes with the item collapsing effect.