## Properties

Name | Type | Default
--- | --- | ---
mode | String | horizontal
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" });
width | Number/String | null
Sets the width. #### Code example Initialize a jqxMenu with the `width` property specified.
$('#jqxMenu').jqxMenu({ width: '250px' });
height | Number/String | null
Sets the height. #### Code example Initialize a jqxMenu with the `height` property specified.
$('#jqxMenu').jqxMenu({ height: '100px' });
easing | String | easeInOutSine
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' });
animationShowDuration | Number | 350
Gets or sets the duration of the show animation. #### Code example Initialize a jqxMenu with the `animationShowDuration` property specified.
$('#jqxMenu').jqxMenu({ animationShowDuration: 200 });
animationHideDuration | Number | 250
Gets or sets the duration of the hide animation. #### Code example Initialize a jqxMenu with the `animationHideDuration` property specified.
$('#jqxMenu').jqxMenu({ animationHideDuration: "fast" });
animationHideDelay | Number | 500
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 });
animationShowDelay | Number | 200
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 });
autoCloseInterval | Number | 10000
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 });
autoSizeMainItems | Boolean | true
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});
autoCloseOnClick | Boolean | true
Automatically closes the opened popups after a click. #### Code example Initialize a jqxMenu with the `autoCloseOnClick` property specified.
    $('#jqxMenu').jqxMenu({autoCloseOnClick: false});
enableRoundedCorners | Boolean | true
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});
disabled | Boolean | true
Enables or disables the jqxMenu. #### Code example Initialize a jqxMenu with the `disabled` property specified.
    $('#jqxMenu').jqxMenu({disabled: false});
autoOpenPopup | Boolean | true
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});
autoOpen | Boolean | true
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});
enableHover | Boolean | true
Enables or disables the hover state. #### Code example Initialize a jqxMenu with the `enableHover` property specified.
    $('#jqxMenu').jqxMenu({enableHover:false});
clickToOpen | Boolean | false
Opens an item after a click by the user. #### Code example Initialize a jqxMenu with the `clickToOpen` property specified.
    $('#jqxMenu').jqxMenu({clickToOpen: true});
## Events
shown | Event |
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. });
closed | Event |
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. });
itemclick | Event |
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. });
initialized | Event |
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. });
## Methods
closeItem | Method |
Closes a menu item. #### Code example Invoke the closeItem method.
    $('#jqxMenu').jqxMenu('closeItem', menuItemId);
openItem | Method |
Opens a menu item #### Code example Invoke the openItem method.
    $('#jqxMenu').jqxMenu('openItem', menuItemId);
setItemOpenDirection | Method |
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');
close | Method |
Closes the menu (only in context menu mode). #### Code example Invoke the close method.
    $("#jqxMenu").jqxMenu('close')
open | Method |
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);