Control Description
The Smooth Navigational Menu control is a multi-level menu that you can stack on your page to categorize your links. The sample was taken from http://www.dynamicdrive.com/dynamicindex1/ddsmoothmenu.htm
Compatibility
Web
Using the control
First of all, drag the control from the toolbox to the web form.
![](pages/50/ab3930a7-fff0-4283-b66a-16dd7970f892/snmenu03.png)
The control basically loads an SDT which contains the menu items. Consequently, you will have to create a SmoothNavMenuData SDT based variable which must be assigned to the control's MenuData property. The structure of SmoothNavMenuData SDT is as follows:
![](pages/50/ab3930a7-fff0-4283-b66a-16dd7970f892/snmenu04.png)
Basic Example
//Sample code for Smooth Navigational Menu
Sub 'SmoothNavMenu'
&SmoothNavMenuData = SmoothNavMenuDataDP.Udp()
EndSub
Event Start
Do 'SmoothNavMenu'
EndEvent
A Data Provider that outputs a SmoothNavMenuData SDT is included with the User Control
![](pages/50/ab3930a7-fff0-4283-b66a-16dd7970f892/snmenu06.png)
Example using recursive Data Provider
Suppose you have a transaction Menu to store the menu options as follows:
![](pages/50/ab3930a7-fff0-4283-b66a-16dd7970f892/snmenu05.png)
Then you can modify the data provider as follows to load the menu items.
//Rules: parm(in:&MenuParentId); //Source: SmoothNavMenuData { SmoothNavMenuItem Where MenuParentId = &MenuParentId when not &MenuParentId.IsEmpty() Where MenuParentId.IsNull() when &MenuParentId.IsEmpty() { Id = MenuId.ToFormattedString() Title = MenuTitle.Trim() Description = MenuDescription.Trim() Link = MenuURL.Trim() Items = SmoothNavMenuDataDP.Udp(MenuId) } }
//Invoke Data Provider
//Sample code for Smooth Navigational Menu
Sub 'SmoothNavMenu'
&SmoothNavMenuData = SmoothNavMenuDataDP.Udp(nullvalue(MenuId))
EndSub
In addition, the control offers a set of properties to customize its behavior.
Control Properties
- Width
- Height
- ControlName
- MenuData: SmoothNavMenu SDT-based variable
- SelectedItem: SmoothNavMenuData.SmoothNavMenuItem SDT- based variable
- Orientation: Choose from Horizontal or Vertical
- HoverBackground: Hover background color
- NormalBackground: Normal background color
Excecution
![](pages/50/ab3930a7-fff0-4283-b66a-16dd7970f892/snmenu01.png)