Search
Menu and MenuItem

Menu

The Menu control displays a collection of expandable menu items, arranged vertically. The image below shows a menu that is an instance of the MindFusion.Common.UI.Menu class:

1. Accessing, adding and removing menu items

The top-level menu items are stored in the Menu.items collection. Each MenuItem might contain child items, which are accessible through the MenuItem.items property. Menu items can be added and removed programmatically by using the add and remove methods of the corresponding collection.

JavaScript  Copy Code

var menu = new ui.Menu(document.getElementById("links"));
menu.loadOnDemand = true;

var menuItem = new ui.MenuItem("Start", "index.html");
menuItem.target = "_blank";
menu.items.add(menuItem);


Menu items can also be created by loading a data object or a JSON string, containing the items data, by using the fromObject and fromJson methods respectively.

JavaScript  Copy Code

var menu = new ui.Menu(document.getElementById("links"));
menu.theme = "blue";

var data = [
       {
        title: "Activities",
        href: "Activities.html",
        items: [
              { title: "Shows how to create an activity timetable. \n" +
      "Planner, Charts, ListView, Virtual Keyboard", cssClass: "description"
              }]
       },
    {
     title: "Chat",
     href: "Chat.html",
     items: [
      { title: "A chat-like application. \n" +
      "WindowHost, ListView, ToolStrip, Tooltip", cssClass: "description"
      }]
    },
       {
        title: "DomInspector",
        href: "DomInspector.html",
        items: [
              { title: "Shows how to build a dynamic tree. \n" +
      "Diagram, TreeView, ListView, Tooltip", cssClass: "description"
              }]
       },
    {
     title: "FlipMatch",
     href: "FlipMatch.html",
     items: [
      { title: "The classic memory game. \n" +
      "Diagram, Dialogs, Gauges", cssClass: "description"
      }]
    },
       {
        title: "ServerLoad",
        href: "ServerLoad.html",
        items: [
              { title: "A sample server load web application. \n" +
      "Diagram, Gauges, Charts", cssClass: "description"
              }]
       },
    {
     title: "SimpleBrowser",
     href: "SimpleBrowser.html",
     items: [
      { title: "A TabControl based web browser application. \n" +
      "TabControl, ToolStrip", cssClass: "description"
      }]
    },
    {
     title: "TemperatureLog",
     href: "TemperatureLog.html",
     items: [
      { title: "A temperature data logger application. \n" +
      "Planner, Charts, Window, Gauges", cssClass: "description"
      }]
    }
    ];

menu.fromObject(data);
menu.render();

2. Customization

Menu items, which contain child items, are expanded on mouse over and collapsed on mouse out. You can specify the number of milliseconds to wait before collapsing an item by setting the closeTimeout property.

The control supports lazy loading, which is enabled by default, meaning that child items DOM will not be created until their parent item is expanded. The full list of menu items (loaded and not) can be accessed through the flatItems property and the currently loaded menu items - though the loadedItems property. Lazy loading can be switched off by setting the loadOnDemand property to false.

JavaScript  Copy Code

menu.loadOnDemand = false;

if(menu.loadedItems.count() > 30)
{
    MindFusion.UI.Dialogs.showInfoDialog("", "You have opened more than 30 menus!", document.getElementById("content"));
}


The appearance of the control can be modified by setting its theme and cssClass properties.

3. Events

Important events for the Menu control include:

  • itemMouseEnter - a notification event, raised when a mouseenter event occurs in an item's element.
  • itemMouseLeave - a notification event, raised when a mouseleave event occurs in an item's element.
  • itemClick - a notification event, raised when a menu item is clicked.

JavaScript  Copy Code

menu.itemClick.addEventListener(handleMenuClick);

function handleMenuClick(sender, args)
{
   //handle the event
}

4. Serialization

The items data can be serialized to a JSON string via the toJson method and deserialized from a JSON string via the fromJson method.

MenuItem

The MenuItem class represents an expandable list item. The collection of child items is accessible through the MenuItem.items property. A menu item displays the text, specified by its title property, and, optionally, an icon, specified by its imageSrc property, or its content can be set to a custom HTML string via its template property. The menu item title can also serve as a link to an URL, specified by the href property.

JavaScript  Copy Code

var menu = new ui.Menu(document.getElementById("links"));
menu.loadOnDemand = true;

var menuItem = new ui.MenuItem("Start", "index.html");
menuItem.target = "_blank";
menu.items.add(menuItem);

var nestedItem = new ui.MenuItem("Section", "sections.html");
nestedItem.target = "_blank";
menuItem.items.add(nestedItem);

JavaScript Pack Programmer's Guide © 2025 MindFusion