UI-related pulldown Menu inherits from list and lets users select the necessary item from the list of grouped items (submenus). Each element of a submenu can start its own submenu.
A dynamic Submenu becomes visible only when you put a mouse pointer over the corresponding item of the main menu (on 'onMouseOver' event) and hides as soon as you remove mouse pointer ("onMouseOut").
Menu object is stored in the data property.
webix.ui({
view:"menu",
id:"my_menu",
subMenuPos:"right",
layout:"y",
data:[ //menu data
{ value:"Translate...", submenu:["English", "Slavic...", "German"]},
{ $template:"Separator" },
{ value:"Post...", submenu:[ "Facebook", "Google+", "Twitter" ]}
],
type:{
subsign:true,
height:50
}
});
Related sample: Showing Menu on Mouse Click (dropping down on hover is disabled)
A menu/submenu item can be a text item including the one that starts its own submenu and any Webix component specified by ID.
Menu items are stored in the data array, each item being an object. Submenu items are stored in the submenu array. Each menu item may have the following attributes:
The easiest way to define menu items is to pass them as a simple array:
{ view:"menu", data:["Google", "Facebook", "Twitter"] }
Or an associative one:
{ view:"menu", data:[
{ id:1, value:"Google"},
{ id:2, value:"Facebook"},
{ id:3, value:"Twitter"}
]}
Each menu and submenu item can be supplied with a link specified in the data object by href and target (optional) attributes:
view:"menu",
data:[
{ id:"1", value:"Imitation of Spenser", href: "#verse1", target:"_blank"},
{ id:"2", value:"The Human Seasons", href: "#verse2"}
]
If not specified, target will be set as empty string.
Badges add info circles to menu items with the number of entities you'd like to assosiate with this or that item (e.g. messages):
view:"menu",
data:[
{ id:"1",value:"Translations", badge:"1"},
{ id:"2",value:"Posts", badge:"12" },
{ id:"3",value:"Info", badge:"24" }
]
Related sample: Menu with Badges
To separate one group of items from another one in vertical menu, use the property $template with one the possible values:
Spacer in vertical menu
view:"menu",
layout:"y",
data:[
{ id:"1", value:"Translations", icon:"qrcode", badge:20 },
{ id:"2", value:"Posts", icon:"file-word-o", badge:3 },
{ $template:"Spacer" },
{ id:"3", value:"Help", icon:"support"},
]
Separator in vertical menu
view:"menu",
layout:"y",
data:[
{ value:"Translate..." },
{ value:"Post...", submenu:[ "Facebook", "Google+", "Twitter" ]},
{ $template:"Separator" },
{ value:"Info" }
]
Submenu items can be set as an array of values:
{ id:"2",value:"Translate...", submenu:[ "English", "Slavic", "German" ]},
Or, as an array of menu objects:
{ id: "1.2", value:"Slavic...", submenu:[
{id: "1.2.1", value:"Belarus"},
{id: "1.2.2", value:"Russian"},
{id: "1.2.3", value:"Ukranian"}
]}
Any nested submenu (a popup) can be configured separately with the help of a config attribute of its parent:
view:"menu",
submenuConfig:{
width:400
},
data:[
{ id:"2",value:"Custom...",
config:{
width:500,
on:{
onItemClick:function(id){
webix.message("Submenu click: "+id);
}
}
},
submenu:[ "Facebook", "Google+", "Twitter" ]
}
]
This configuration overrides common configuration for submenus defined by submenuConfig.
Related sample: Configuring Submenus
Submenu parameter may point as well to any Webix component that has been initialized previously:
webix.ui({
id:"details1",
view:"context", width:300, height:200,
body:{ content:"html1" }
});
webix.ui({
view:"menu",
data:[
{ value:"HTML 4", submenu:"details1" },
{ value:"HTML 5", submenu:"details2" }
]
});
Related sample: HTML Elements as Menu Items
The same way you can initialize Webix submenu component separately and then point to it within submenu property:
webix.ui({
view:"submenu", id:"test", data:[
{ id:"1.1", value:"English"},
{ id:"1.3", value:"German"}
]
});
webix.ui({
view:"menu",
data:[
{ id:"1", value:"Translate...", submenu:"test"},
{ id:"2", value:"Post..."
]
});
Each submenu item can take its own submenu component.
Menu takes after a toolbar in appearance, so the best way to create a menubar is to initialize menu and toolbar in neighbouring columns:
webix.ui({
cols:[ menu, toolbar ]
});
Related sample: Menu in Toolbar
To hide and show menu item, you should apply hideItem() and showItem() to the menu component while specifying item ID as function parameter.
The event that triggers function execution can be checkbox state change in the Webix tree populated with the same data as menu, provided that checkbox item ID = related menu item ID.
$$("tree1").attachEvent("onItemCheck",function(id,state){
if (state) //if checked
$$("top_menu").hideItem(id);
else
$$("top_menu").showItem(id);
});
As a result, only "unchecked" menu items are shown.
Related sample: Hiding Menu Items
To disable menu item, you should apply special disableItem() and enableItem() functions to menu passing ID of the necessary item into them. The methods can be triggered by changing state of a checkbox which ID equals to the ID of the corresponding menu item.
$$("tree1").attachEvent("onItemCheck",function(id,state){
if(state) //if checked
$$("top_menu").disableItem(id);
else
$$("top_menu").enableItem(id);
});
In essence, disabling and enabling is performed via CSS classes, that's why menu items get a template that helps display normal and disabled item differently:
view:"menu",
template:function(obj){
if(obj.disabled)
return "<span class='disabled'>"+obj.value+"</span>";
return obj.value;
}
Related sample: Disabling Menu Items
All menu and submenu items can be accessed by their IDs.
1 . Any item can be accessed directly with getMenuItem() method that takes item ID as parameter and returns item object:
//getting menu item value by its ID
$$('menu1').getMenuItem(id).value;
2 . At the same time, menu items can be derived through submenu object returned by getSubMenu() method for an item with the specified ID. If there's no submenu for an item - an object of the calling component will be returned.
var menu = $$("menu1").getSubMenu(id);
var item = menu.getItem(id).value;
Related sample: HTML Elements as Menu Items
Both methods can be used in either of menu inner events, for instance, click events:
General "onMenuItemClick" handler
view:"menu",
data:[...],
on:{
onMenuItemClick:function(id){
webix.message("Click: "+this.getMenuItem(id).value);
}
}
Submenu specific "onItemClick" handler
view:"menu",
data:[
{ id:"1",value:"Custom...",
config:{
width:250,
on: { onItemClick:function(id){
webix.message("Submenu click: "+id);
}}
},
submenu:{...}
}
]
Related sample: Configuring Submenus