Slide Menu control

The Slide Menu control is an XP style menu that you can stack on your page to categorize your links. If the cookies are enabled, the script will use them to remember the last state of the menu upon its return. The fade effect is optional, and can be turned off. The sample was taken from http://www.jswitch.com.

You can download the Slide Menu control from GeneXus Marketplace.

Using the control

The control basically loads a Structured Data Type (SDT) which contains the menu items. Consequently, you will have to create a SideMenuData SDT based variable, which must be assigned to the control´s SlideMenuData property. The SlideMenuData SDT is composed simply by 3 fields:

• Id: character. Useful for event handling
• Name: the name of the menu item
• Link: the URL of the menu item

When a link is not specified and the user clicks on a menu item, a server event will be raised. Otherwise, the link will be executed, and no event is raised. That event can be handled as follows:

Event SlideMenu1.ItemClicked
    textBlock1.Caption = &selectedItem.Name
EndEvent

Example

&slideMenuDataItem.Id = "Java"
&slideMenuDataItem.Name = "Java"  &slideMenuDataItem.Link = "http://java.sun.com"   &slideMenuData.Add(&slideMenuDataItem)    &slideMenuDataItem = new()  &slideMenuDataItem.Id = "Microsoft"
&slideMenuDataItem.Name = "Microsoft"  &slideMenuDataItem.Link = "http://www.microsoft.com"   &slideMenuData.Add(&slideMenuDataItem)    &slideMenuDataItem = new()  &slideMenuDataItem.Id = "GeneXus"
&slideMenuDataItem.Name = "GeneXus"  &slideMenuDataItem.Link = "http://www.genexus.com"   &slideMenuData.Add(&slideMenuDataItem)    &slideMenuDataItem = new()  &slideMenuDataItem.Id = "GXTechnical"
&slideMenuDataItem.Name = "GXTechnical"  &slideMenuDataItem.Link = "http://www.gxtechnical.com/"   &slideMenuData.Add(&slideMenuDataItem)

Example using a Data Provider:

Data
{
   Id = "Microsoft"
   Name = "Microsoft"
   Link = "http://www.microsoft.com"
}
Data
{
   Id = "GeneXus"
   Name = "GeneXus"
   Link = "http://www.genexus.com"
}
Data
{
   Id = "GXTech
   Name = "GXTehcnical"
   Link = "http://www.gxtechnical.com"
}

The sample shown above will create the following Slide Menu:

In addition, the control offers a set of properties to customize its behavior.

Control Properties

• Width
• Height
• Title
• Slide Delay: sets the amount of time the menu takes to open and collapse
• Do Fading: sets whether or not the menu should make the fade effect

Control Events

• ItemClicked: raised when the user clicks a menu item.

To do

• Add properties to handle the control appearance.

To Install It

Please visit: Default Installation Instructions for User Controls.