jQueryUI Menu Plugin Tutorial Example [latest]

Earlier we looked at different plugins provided by jQueryUI. In this post, we will see the jQueryUI Menu plugin in action. jQueryUI provides menu() method to create themeable menu with keyboard and mouse interaction. We can create menu from any valid markup and the most commonly used element is the unordered list. We will look at different options, methods and events associated with the jQueryUI Menu plugin in this tutorial.

jQueryUI menu plugin uses following CSS classes to style the look and feel of the menu.

ui-menu: This is menu’s outer container. It has additional ui-menu-icons class if it contains any icons.
ui-menu-item: this is container for individual items in the menu.
ui-menu-icon: Used to set icons for sub menu.
ui-menu-divider: This is used to divide elements between the items.

Menu Plugin Options

In this section, we will discuss about different options available to customize the jQueryUI Menu plugin. We have used many of these options in the Menu Plugin in Action section.

Options	Syntax	Description
disabled	$( “.selector” ).menu({ disabled: true });	Menu will be disabled, if this option is set to true.
icons	$( “.selector” ).menu({ icons: { submenu: “ui-icon-circle-triangle-e” } });	Icons used for the sub menus.
items	$( “.selector” ).menu({ items: “.custom-item” });	Selector for the elements that serve as the menu items.
menus	$( “.selector” ).menu({ menus: “div” });	Selector for the elements that serve as the menu container, including sub-menus.
position	$( “.selector” ).menu({ position: { my: “left top”, at: “right-5 top+5” } });	This option is used to Identify the position of sub menus in relation to the associated menu item.
role	$( “.selector” ).menu({ role: null });	This option is used to customize the ARIA roles used for the menu and menu items.

The above table briefly describes all the available options in the jQueryUI Menu plugin.

Menu Plugin Methods

In this section, we will look into the jQueryUI Menu plugin methods and its syntax. These methods are very useful when you deal with the Menu plugin.

Methods	Usage	Description
blur([event ] )	$( “.selector” ).menu( “blur” );	This method is used to triggers the menu’s blur event to remove focus from a menu and resets active element styles.
collapse( [event ] )	$( “.selector” ).menu( “collapse” );	This method is used to close the currently active sub menu.
destroy()	$( “.selector” ).menu( “destroy” );	This method is used to remove the menu plugin functionality.
disable()	$( “.selector” ).menu( “disable” );	This method is used to disable the menu.
enable()	$( “.selector” ).menu( “enable” );	Used to enable menu.
expand( [event ] )	$( “.selector” ).menu( “expand” );	This method is used to expand the currently active sub menu.
focus( [event ], item )	$( “.selector” ).menu( “focus”, null, menu.find( “.ui-menu-item:last” ) );	This method triggers the focus event .
instance()	$( “.selector” ).menu( “instance” );	This method is used to get the menu’s instance object.
isFirstItem()	$( “.selector” ).menu( “isFirstItem” );	Returns true if the currently active item is the first item in the menu otherwise false.
isLastItem()	$( “.selector” ).menu( “isLastItem” );	Returns true if the currently active item is the last item in the menu otherwise false.
next([event ] )	$( “.selector” ).menu( “next” );	This method will move the active state to the next item in the menu.
nextPage( [event ] )	$( “.selector” ).menu( “nextPage” );	This method will move the active state to first menu item below the bottom of a scrollable menu or the last item if not scrollable.
option( optionName )	$( “.selector” ).menu( “option”, “disabled” );	This method is used to get the value associated with the specified optionName.
previous( [event ] )	$( “.selector” ).menu( “previous” );	This method will move the acti ve state to the previous item in the menu.
previousPage([event ] )	$( “.selector” ).menu( “previousPage” );	This method will move the active state to previous menu item above the top of a scrollable menu or the first item if not scrollable.
refresh()	$( “.selector” ).menu( “refresh” );	Initializes sub-menus and menu items that have not already been initialized
select( [event ] )	$( “.selector” ).menu( “select” );	Used to select the currently active menu item.
widget()	$( “.selector” ).menu( “widget” );	Used to return jQuery object containing the menu plugin.

The above table briefly describes all the available methods in the jQueryUI Menu plugin.

Menu Plugin Events

In this section, we will discuss about different events associated with jQueryUI Menu plugin. We have used many of these events in the Menu Plugin in Action section.

Events	Usage	Description
blur( event, ui )	$( “.selector” ).menu({,blur: function( event, ui ) {}});	Fired when the menu is out of focus.
create( event, ui )	$( “.selector” ).menu({,create: function( event, ui ) {}});	Fired when the menu is created.
focus( event, ui )	$( “.selector” ).menu({,focus: function( event, ui ) {}});	Fired when the menu gets focus.
select( event, ui )	$( “.selector” ).menu({,select: function( event, ui ) {}});	Fired when the menu is selected.

The above table briefly describes all the available events in the jQueryUI Menu plugin.

Menu Plugin in Action

In this section, we will try different examples to explore the uses of jQueryUI Menu plugin.

Default Functionality

The following example demonstrates the default functionality of jQueryUI Menu plugin, disabled items and nested menus with mouse and keyboard navigation support.

menu-default.html


&lt;!doctype html&gt;
&lt;html lang="en"&gt;
&lt;head&gt;
  &lt;title&gt;jQuery UI Menu - Default Functionality&lt;/title&gt;
  &lt;link rel="stylesheet" href="https://code.jquery.com/ui/1.11.2/themes/south-street/jquery-ui.css"&gt;
  &lt;script src="https://code.jquery.com/jquery-2.1.1.js"&gt;&lt;/script&gt;
  &lt;script src="https://code.jquery.com/ui/1.11.2/jquery-ui.js"&gt;&lt;/script&gt;
  &lt;script&gt;
  $(function() {
    $( "#menu" ).menu();
  });
  &lt;/script&gt;
  &lt;style&gt;
  	.ui-menu { width: 150px; }
  &lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;ul id="menu"&gt;
  &lt;li&gt;Hockey&lt;/li&gt;
  &lt;li&gt;Football
      &lt;ul&gt;
        &lt;li&gt;Iain Hume&lt;/li&gt;
        &lt;li&gt;Del Piero&lt;/li&gt;
        &lt;li&gt;David James&lt;/li&gt;
      &lt;/ul&gt;
  &lt;/li&gt;
  &lt;li&gt;Cricket
    &lt;ul&gt;
        &lt;li&gt;Sachin&lt;/li&gt;
        &lt;li&gt;Ganguly&lt;/li&gt;
        &lt;li&gt;Dravid&lt;/li&gt;
      &lt;/ul&gt;
  &lt;/li&gt;
  &lt;li class="ui-state-disabled"&gt;KickBoxing&lt;/li&gt;
  &lt;li&gt;Tennis
  &lt;ul&gt;
      &lt;li&gt;Patrick Rafter&lt;/li&gt;
    &lt;/ul&gt;
  &lt;/li&gt;
&lt;/ul&gt;
&lt;/body&gt;
&lt;/html&gt;

<!doctype html>

<head>

<title>jQuery UI Menu - Default Functionality</title>

$(function() {

$( "#menu" ).menu();

});

</script>

<style>

.ui-menu { width: 150px; }

</style>

</head>

<body>

<li>Hockey</li>

<li>Football

<ul>

<li>Del Piero</li>

<li>David James</li>

</ul>

</li>

<li>Cricket

<ul>

<li>Sachin</li>

<li>Ganguly</li>

<li>Dravid</li>

</ul>

</li>

<li class="ui-state-disabled">KickBoxing</li>

<li>Tennis

<ul>

<li>Patrick Rafter</li>

</ul>

</li>

</ul>

</body>

</html>

You will see the following output in your browser.

In this example, ui-state-disabled is used to disable any item in the menu.

Menu with Category

The following example demonstrates the menu with different categories. We use items option to implement this functionality.

menu-category.html


&lt;!doctype html&gt;
&lt;html lang="en"&gt;
&lt;head&gt;
  &lt;title&gt;jQuery UI Menu - Category&lt;/title&gt;
  &lt;link rel="stylesheet" href="https://code.jquery.com/ui/1.11.2/themes/south-street/jquery-ui.css"&gt;
  &lt;script src="https://code.jquery.com/jquery-2.1.1.js"&gt;&lt;/script&gt;
  &lt;script src="https://code.jquery.com/ui/1.11.2/jquery-ui.js"&gt;&lt;/script&gt;
  &lt;script&gt;
  $(function() {
    $( "#menu" ).menu({
      items: "&gt; :not(.ui-widget-header)"
    });
  });
  &lt;/script&gt;
  &lt;style&gt;
  	.ui-menu { width: 150px; }
  	.ui-widget-header { padding: 0.3em; }
  &lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;ul id="menu"&gt;
  &lt;li class="ui-widget-header"&gt;Sports&lt;/li&gt;
  &lt;li&gt;Football&lt;/li&gt;
  &lt;li&gt;Cricket&lt;/li&gt;
  &lt;li class="ui-widget-header"&gt;Players&lt;li&gt;
  &lt;li&gt;Iain Hume&lt;/li&gt;
  &lt;li&gt;David James&lt;/li&gt;
  &lt;li&gt;Sachin&lt;/li&gt;
  &lt;li&gt;Ganguly&lt;/li&gt;
&lt;/ul&gt;
&lt;/body&gt;
&lt;/html&gt;

<!doctype html>

<head>

<title>jQuery UI Menu - Category</title>

$(function() {

$( "#menu" ).menu({

items: "> :not(.ui-widget-header)"

});

</script>

<style>

.ui-menu { width: 150px; }

.ui-widget-header { padding: 0.3em; }

</style>

</head>

<body>

<li class="ui-widget-header">Sports</li>

<li>Football</li>

<li>Cricket</li>

<li class="ui-widget-header">Players<li>

<li>David James</li>

<li>Sachin</li>

<li>Ganguly</li>

</ul>

</body>

</html>

You will see the following output in your browser.

You can see how we used items options to create two categories in the above menu, Sports and Players.

Menu with Icons

The following example demonstrates the menu plugin with different icons used. jQuery UI provides a list of ui-icons to customize the menu plugin.

menu-icons.html


&lt;!doctype html&gt;
&lt;html lang="en"&gt;
&lt;head&gt;
  &lt;title&gt;jQuery UI Menu - Icons&lt;/title&gt;
  &lt;link rel="stylesheet" href="https://code.jquery.com/ui/1.11.2/themes/south-street/jquery-ui.css"&gt;
  &lt;script src="https://code.jquery.com/jquery-2.1.1.js"&gt;&lt;/script&gt;
  &lt;script src="https://code.jquery.com/ui/1.11.2/jquery-ui.js"&gt;&lt;/script&gt;
  &lt;script&gt;
  $(function() {
    $( "#menu" ).menu();
  });
  &lt;/script&gt;
  &lt;style&gt;
  .ui-menu { width: 150px; }
  &lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;ul id="menu"&gt;
  &lt;li&gt;&lt;span class="ui-icon ui-icon-flag"&gt;&lt;/span&gt;Flag&lt;/li&gt;
  &lt;li&gt;&lt;span class="ui-icon ui-icon-scissors"&gt;&lt;/span&gt;Cut
    &lt;ul&gt;
      &lt;li&gt;&lt;span class="ui-icon ui-icon-image"&gt;&lt;/span&gt;Cut&lt;/li&gt;
      &lt;li&gt;&lt;span class="ui-icon ui-icon-signal-diag"&gt;&lt;/span&gt;Star&lt;/li&gt;
     &lt;/ul&gt;
   &lt;/li&gt;
  &lt;li&gt;&lt;span class="ui-icon ui-icon-star"&gt;&lt;/span&gt;Star&lt;/li&gt;
  &lt;li class="ui-state-disabled"&gt;&lt;span class="ui-icon ui-icon-print"&gt;&lt;/span&gt;Print&lt;/li&gt;
&lt;/ul&gt;
&lt;/body&gt;
&lt;/html&gt;

<!doctype html>

<head>

<title>jQuery UI Menu - Icons</title>

$(function() {

$( "#menu" ).menu();

});

</script>

<style>

.ui-menu { width: 150px; }

</style>

</head>

<body>

<li><span class="ui-icon ui-icon-scissors"></span>Cut

<ul>

</ul>

</li>

<li class="ui-state-disabled"><span class="ui-icon ui-icon-print"></span>Print</li>

</ul>

</body>

</html>

You will see the following output in your browser.

You can see the how we used ui-icon CSS class to style menu’s look and feel.

That’s all for jQueryUI menu plugin and you will see more plugins in the coming posts.

jQueryUI Menu Plugin Tutorial Example [latest]

Byadmin

Contents

Menu Plugin Options

Menu Plugin Methods

Menu Plugin Events

Menu Plugin in Action

Default Functionality

Menu with Category

Menu with Icons

Like this:

By admin

Related Post

How to get an element with a specific index in jQuery With Example [Latest]

Find all the descendants of an element in jQuery With Example [Latest]

jQuery UI Button and Buttonset Widget With Examples [Latest]

Leave a ReplyCancel reply

You missed

[Solved] org.hibernate.HibernateException: get is not valid without active transaction With Examples [Latest]

How to Generate XML from XSD in Eclipse Example [Latest]

Queue Implementation in Java using Array With Examples [Latest]

Depth First Search (DFS) for a Graph With Examples [Latest]

Byadmin

Contents

Menu Plugin Options

Menu Plugin Methods

Menu Plugin Events

Menu Plugin in Action

Default Functionality

Menu with Category

Menu with Icons

Share this:

Like this:

By admin

Related Post

Leave a ReplyCancel reply

You missed