Gets or sets the menu's display mode. Possible Values: 'horizontal', 'vertical','popup'

Code example

Initialize a jqxMenu with the mode property specified.

$('#jqxMenu').jqxMenu({ width: '250px', height: '200px', mode: "vertical" });

Sets the width.

Code example

Initialize a jqxMenu with the width property specified.

$('#jqxMenu').jqxMenu({ width: '250px' });

Sets the height.

Code example

Initialize a jqxMenu with the height property specified.

$('#jqxMenu').jqxMenu({ height: '100px' });

Gets or sets the animation's easing to one of the JQuery's supported easings.

Code example

Initialize a jqxMenu with the easing property specified.

$('#jqxMenu').jqxMenu({ easing: 'easeInOutSine' });

Gets or sets the duration of the show animation.

Code example

Initialize a jqxMenu with the animationShowDuration property specified.

$('#jqxMenu').jqxMenu({ animationShowDuration: 200 });

Gets or sets the duration of the hide animation.

Code example

Initialize a jqxMenu with the animationHideDuration property specified.

$('#jqxMenu').jqxMenu({ animationHideDuration: "fast" });

Gets or sets the delay before the start of the hide animation.

Code example

Initialize a jqxMenu with the animationHideDelay property specified.

$('#jqxMenu').jqxMenu({ animationHideDelay: 500 });

Gets or sets the delay before the start of the show animation.

Code example

Initialize a jqxMenu with the animationShowDelay property specified.

$('#jqxMenu').jqxMenu({ animationHideDelay: 500 });

Gets or sets the time interval after which all opened items will be closed. When you open a new sub menu, the interval is cleared. If you want to disable this automatic closing behavior of the jqxMenu, you need to set the autoCloseInterval property to 0.

Code example

Initialize a jqxMenu with the autoCloseInterval property specified.

$('#jqxMenu').jqxMenu({ autoCloseInterval: 0 });

Auto-Sizes the jqxMenu's main items when the menu's mode is 'horizontal'.

Code example

Initialize a jqxMenu with the autoSizeMainItems property specified.

$('#jqxMenu').jqxMenu({autoSizeMainItems: false}); 

Automatically closes the opened popups after a click.

Code example

Initialize a jqxMenu with the autoCloseOnClick property specified.

$('#jqxMenu').jqxMenu({autoCloseOnClick: false}); 

Enables or disables the rounded corners. This setting has effectin browsers that support the 'border-radius CSS setting.'

Code example

Initialize a jqxMenu with the enableRoundedCorners property specified.

$('#jqxMenu').jqxMenu({enableRoundedCorners: false}); 

Enables or disables the jqxMenu.

Code example

Initialize a jqxMenu with the disabled property specified.

$('#jqxMenu').jqxMenu({disabled: false}); 

Opens the Context Menu when the right-mouse button is pressed. When this property is set to false, the Open and Close functions can be used to open and close the Context Menu.

Code example

Initialize a jqxMenu with the autoOpenPopup property specified.

$('#jqxMenu').jqxMenu({autoOpenPopup: false}); 

Opens the top level menu items when the user hovers them.

Code example

Initialize a jqxMenu with the autoOpen property specified.

$('#jqxMenu').jqxMenu({autoOpen: false}); 

Enables or disables the hover state.

Code example

Initialize a jqxMenu with the enableHover property specified.

$('#jqxMenu').jqxMenu({enableHover:false}); 

Opens an item after a click by the user.

Code example

Initialize a jqxMenu with the clickToOpen property specified.

$('#jqxMenu').jqxMenu({clickToOpen: true}); 

This event is triggered when any of the jqxMenu Sub Menus is displayed.

Code example

Bind to the shown event by type: jqxMenu.

$('#jqxMenu').bind('shown', function () { // Some code here. }); 

This event is triggered when any of the jqxMenu Sub Menus is closed.

Code example

Bind to the closed event by type: jqxMenu.

$('#jqxMenu').bind('closed', function () { // Some code here. }); 

This event is triggered when a menu item is clicked.

Code example

Bind to the itemclick event by type: jqxMenu.

$('#jqxMenu').bind('itemclick', function () { // Some code here. }); 

This event is triggered after the menu is initialized.

Code example

Bind to the initialized event by type: jqxMenu.

$('#jqxMenu').bind('initialized', function () { // Some code here. }); 

Closes a menu item.

Code example

Invoke the closeItem method.

$('#jqxMenu').jqxMenu('closeItem', menuItemId);

Opens a menu item

Code example

Invoke the openItem method.

$('#jqxMenu').jqxMenu('openItem', menuItemId);

Sets the item's popup open direction

Code example

Invoke the setItemOpenDirection method.

// @param id

// @param String - horizontal direction

// @param String - vertical direction

$("#jqxMenu").jqxMenu('setItemOpenDirection', 'Services', 'right', 'up');

Closes the menu (only in context menu mode).

Code example

Invoke the close method.

$("#jqxMenu").jqxMenu('close')

Opens the menu(only in context menu mode).

Code example

Invoke the open method.

var scrollTop = $(window).scrollTop();
var scrollLeft = $(window).scrollLeft();
contextMenu.jqxMenu('open', parseInt(event.clientX) + 5 + scrollLeft, parseInt(event.clientY) + 5 + scrollTop);