Sets or gets the menu's display mode.

Possible Values:

'horizontal'

'vertical'

'popup'

Code example

Set the mode property.

$('#jqxMenu').jqxMenu({  mode: "vertical" });

Get the mode property.

var mode = $('#jqxMenu').jqxMenu('mode');

Sets or gets the jqxMenu's width.

Code example

Set the width property.

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

Get the width property.

var width = $('#jqxMenu').jqxMenu('width');

Sets or gets the jqxMenu's height.

Code example

Set the height property.

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

Get the height property.

var height = $('#jqxMenu').jqxMenu('height');

Sets or getsa value indicating whether widget's elements are aligned to support locales using right-to-left fonts.

Code example

Set the rtl property.

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

Get the rtl property.

var rtl = $('#jqxMenu').jqxMenu('rtl'); 

Sets the widget's theme.

jQWidgets uses a pair of css files - jqx.base.css and jqx.[theme name].css. The base stylesheet creates the styles related to the widget's layout like margin, padding, border-width, position. The second css file applies the widget's colors and backgrounds. The jqx.base.css should be included before the second CSS file. In order to set a theme, you need to do the following:

• Include the theme's CSS file after jqx.base.css.
  The following code example adds the 'energyblue' theme.

  
  <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
  <link rel="stylesheet" href="../../jqwidgets/styles/jqx.energyblue.css" type="text/css" />
  
  

• Set the widget's theme property to 'energyblue' when you initialize it.

Specifies the jqxMenu's data source. Use this property to populate the jqxMenu.

Each menu item may have following fields:
Item Fields

• label - item's label.
• value - item's value.
• html - item's html. The html to be displayed in the item.
• id - item's id.
• items - array of sub items.
• subMenuWidth - sets the sub menu's width.
• disabled - determines whether the item is enabled/disabled.

Code examples

Initialize a jqxMenu with the source property specified.

var source = [
    { label: "Item 1", expanded: true, items: [
        { label: "Item 1.1" },
        { label: "Item 1.2", selected: true }
    ]
    },
    { label: "Item 2" },
    { label: "Item 3" },
    { label: "Item 4", items: [
        { label: "Item 4.1" },
        { label: "Item 4.2" }
    ]
    },
    { label: "Item 5" },
    { label: "Item 6" },
    { label: "Item 7" }
];

    // create jqxMenu
$('#jqxMenu').jqxMenu({ source: source, height: '30px', width: '330px'});
                        

Sets or gets the animation's easing to one of the JQuery's supported easings.

Code example

Set the easing property.

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

Get the easing property.

var easing = $('#jqxMenu').jqxMenu('easing');

Sets or gets the duration of the show animation.

Code example

Set the animationShowDuration property.

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

Get the animationShowDuration property.

var animationShowDuration = $('#jqxMenu').jqxMenu('animationShowDuration');

Sets or gets the duration of the hide animation.

Code example

Set the animationHideDuration property.

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

Get the animationHideDuration property.

var animationHideDuration = $('#jqxMenu').jqxMenu('animationHideDuration');

Sets or gets the delay before the start of the hide animation.

Code example

Set the animationHideDelay property.

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

Get the animationHideDelay property.

var animationHideDelay = $('#jqxMenu').jqxMenu('animationHideDelay');

Sets or gets the delay before the start of the show animation.

Code example

Set the animationShowDelay property.

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

Get the animationShowDelay property.

var animationShowDelay = $('#jqxMenu').jqxMenu('animationShowDelay');

Sets or gets 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

Set the autoCloseInterval property.

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

Get the autoCloseInterval property.

var autoCloseInterval = $('#jqxMenu').jqxMenu('autoCloseInterval');

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

Code example

Set the autoSizeMainItems property.

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

Get the autoSizeMainItems property.

var autoSizeMainItems = $('#jqxMenu').jqxMenu('autoSizeMainItems');

Automatically closes the opened popups after a click.

Code example

Set the autoCloseOnClick property.

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

Get the autoCloseOnClick property.

var autoCloseOnClick = $('#jqxMenu').jqxMenu('autoCloseOnClick');

Sets or gets the popup's z-index.

Code example

Set the popupZIndex property.

$("#jqxMenu").jqxMenu({popupZIndex: 999999});

Get the popupZIndex property.

var zIndex = $('#jqxMenu').jqxMenu('popupZIndex'); 

Enables or disables the jqxMenu.

Code example

Set the disabled property.

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

Get the disabled property.

var disabled = $('#jqxMenu').jqxMenu('disabled');

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

Set the autoOpenPopup property.

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

Get the autoOpenPopup property.

var autoOpenPopup = $('#jqxMenu').jqxMenu('autoOpenPopup');

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

Code example

Set the autoOpen property.

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

Get the autoOpen property.

var autoOpen = $('#jqxMenu').jqxMenu('autoOpen');

Enables or disables the hover state.

Code example

Set the enableHover property.

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

Get the enableHover property.

var enableHover = $('#jqxMenu').jqxMenu('enableHover');

Opens an item after a click by the user.

Code example

Set the clickToOpen property.

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

Get the clickToOpen property.

var clickToOpen = $('#jqxMenu').jqxMenu('clickToOpen');

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

Code example

Bind to the shown event by type: jqxMenu.

$('#jqxMenu').on('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').on('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').on('itemclick', function (event)
{
    // get the clicked LI element.
    var element = event.args;
});
                         

This event is triggered after the menu is initialized.

Code example

Bind to the initialized event by type: jqxMenu.

$('#jqxMenu').on('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);

Focuses the widget.

Code examples

Invoke the focus method.

$('#jqxMenu').jqxMenu('focus'); 

Destroys the widget.

Code examples

Invoke the destroy method.

$('#jqxMenu').jqxMenu('destroy');