Introduction

Menu is the most basic element of modern GUI design. It makes it easy to perform certain actions (navigate to webpage) quickly. Most simple menus have only one level and are always visible. They are basically a list of actions. More complicated menus can include sub-menus and context menus (shown in response to some event).

If you want to make a simple menu you can just use HTML in conjunction with CSS. But more advanced functionality will require extensive use of JavaScript, making it much more complicated.

JSForms menu control provides facilities to make menu creation simple and intuitive again, no matter how complicated you want it to be. I tried to make it as customizable as possible to meet any unforeseen needs. For now there is only one menu style. In the future it will come with different styles and in many cases only colors will need to be adjusted.

Usage

In most situations it's easy to recognize when to use a menu or when to avoid it. If in doubt it's probably good idea to start without one (or make it small). User interface generally should be kept simple and uncluttered. Still, when used correctly a menu can make GUI intuitive.

When all you need is a simple menu, JSForms could be an overkill. I strive to make it easy to use, but there is still some overhead in using it. Where it starts to shine is when more complex scenarios are encountered.

As soon as there is a need for a sub-menu JSForms menu makes it easy to add and work with them. It takes care of all the ground work and aims to help you focus on more important stuff than fiddling with the script.

Context menu can make it easier to use other controls (such as having a context menu in a tree control). It can provide the means to work with the data shown anywhere on the web page. It can also be dynamically attached to new elements created on the fly (this however will detach the menu from the old element. The behavior might change in the future).

Menu features

• Horizontal and vertical - Each menu can be aligned to be either horizontal or vertical.
• Customizing - Menu style can be customized using standard CSS techniques. Menu behavior can be modified using behaviors mechanism.
• Sub-menus - Each menu item can have a sub-menu. Each sub-menu is a regular menu that is shown in response to some event (i.e. when the parent menu item gains focus). Every sub-menu item can have it's own sub-menu. This, in essence, makes it possible to create menus of unlimited depth (although I have to advise you to be careful with menus deeper than 3 or 4 levels. Deep menus are complicated and confusing for the users).
• Separator - Menu items can be grouped together using separator (a line that creates a visual break in the menu). Each menu item can be turned into a separator, so it's easy to change grouping on the fly.
• Context menu - In addition to regular, always visible, menu library also provides support for context menus. It can be configured to show itself in response to some event on any control.
• Check buttons - Check buttons can allow the user to change state of the menu, or anything else that is connected to it.
• Icons - Each item can have a custom icon. The icon is shown using img tag and a icon URL should be supplied.

Limitations

Currently there is a number of limitations. Some of them will be addressed in the upcoming versions. For more details consult JSForms Menu documentation.

Examples

• Simple Menu - Simple flat menu. All code used to generate controls is shown on the page.
• Context Menu - Context menu example. Shows how to add custom context menu to any element to extend it's functionality.
• Sub Menus - Example demonstrating how to create sub-menus.
• Build Menu - Demonstration of how to build a menu from scratch using only JavaScript.