Before reading this article, I highly recommend reading the previous parts of the series:

A menu widget provides mouse and keyboard interactions for navigation. A menu widget usually consists of a main menu bar with pop up menus. Each pop menu may have a sub pop menu. A menu may be created by list element (ul or ol) or may be created using other markup elements.

Syntax:

$(selector, context).menu (options)

or

$(selector, context).menu ("action", params)

Example

  1. <!DOCTYPEhtml>
  3. <head runat="server">
  5. <title></title>
  7. <link href="http://code.jquery.com/ui/1.10.4/themes/blitzer/jquery-ui.css" rel="stylesheet">
  9. <script src="http://code.jquery.com/jquery-1.10.2.js">
  10. </script>
  12. <script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js">
  13. </script>
  15. <script>
  16. $(document).ready(function() {
  18. $("#menu-1").menu({
  20. icons: {
  21. submenu: "ui-icon-transferthick-e-w"
  22. },
  24. "select": function(event, ui) {
  26. alert(ui.item.text());
  28. }
  29. });
  31. });
  32. </script>
  34. <style>
  35. .ui-menu {
  36. width: 180px;
  37. margin-left: 400px;
  38. font-size: 24px;
  39. margin-top: 50px
  40. }
  42. #div1 {
  43. background-color: coral;
  44. color: ButtonHighlight;
  45. font-size: 30px;
  46. height: 450px;
  47. width: 1000px;
  48. text-align: center;
  49. margin-left: 150px
  50. }
  51. </style>
  53. </head>
  55. <body>
  57. <div id="div1">
  59. <span>************Menu*************</span>
  61. <ul id="menu-1">
  63. <li>
  64. <a href="#">Element1</a>
  65. </li>
  67. <li>
  68. <a href="#">Element2</a>
  69. </li>
  71. <li>
  72. <a href="#">Element3</a>
  74. <ul>
  76. <li>
  77. <a href="#">Element3-1</a>
  78. </li>
  80. <li>
  81. <a href="#">Element3-2</a>
  82. </li>
  84. <li>
  85. <a href="#">Element3-3</a>
  86. </li>
  88. </ul>
  90. </li>
  92. <li>
  93. <a href="#">Element4</a>
  94. </li>
  96. </ul>
  98. </div>
  100. </body>
  102. </html>

Output

output

Option

Option

Description

Example

isable

If set to set disables the menu

$("#menu-1").menu({

disabled: true

});

icon

Define icon used for menu

$("#menu-1").menu({

icons: { submenu: "ui-icon-transferthick-e-w" },

});

items

Define selector for the elements that serve as the menu items. Default value is “> *”

$("#menu-1").menu({

items: "*"

});

menus

Define a selector for the elements that serve as the menu container, including sub-menus. By default its value is ul.

$("#menu-1").menu({

menus: "div"

});

position

Define the position of submenus in relation to the associated parent menu item. By default value is { my: "left top", at: "right top" }

$("#menu-1").menu({

position:{ my: "left top", at: "left top" }

});

role

Define ARIA roles used for the menu and menu items. By default its value is menu.

$("#menu-1").menu({

role: null

});

Methods

Method

Description

Example

blur(event)

Removes focus from a menu and resets any active element styles

$("#menu-1").menu("blur");

collapse(event)

Closes the currently active sub-menu.

$("#menu-1").menu("collapse");

expand(event)

Opens the sub-menu below the currently active item, if one exists.

$("#menu-1").menu("expand");

focus(event,item)

This method activates a particular menu item, begins opening any sub-menu if present and triggers the menu's focus event.

$("#menu-1").menu("focus", null, menu.find(".ui-menu-item:first"));

isFirstItem()

This method returns a boolean value, if the current active menu item is the first menu item.

varobj=$("#menu-1").menu("isFirstItem");

isLastItem()

This method returns a boolean value, if the current active menu item is the last menu item.

varobj=$("#menu-1").menu("isLastItem");

nextPage(event)

This method moves active state to first menu item below the bottom of a scrollable menu or the last item if not scrollable

$("#menu-1").menu("nextPage");

previos(event)

This method moves active state to previous menu item.

$("#menu-1").menu("previous");

previousPage(event)

This method moves active state to first menu item above the top of a scrollable menu or the first item if not scrollable.

$("#menu-1").menu("previousPage");

referesh()

This method initializes sub-menus and menu items that have not already been initialized.

$("#menu-1").menu("refresh");

select()

This method selects the currently active menu item, collapses all sub-menus and triggers the menu's select event.

$("#menu-1").menu("select");

Events:

Event

Description

Example

blur(event,ui)

Event triggered when the menu loses focus.

$("#menu-1").menu({ blur: function (event, ui) { } });

create(event,ui)

Event triggered when the menu is created.

$("#menu-1").menu({ create: function (event, ui) { } });

focus(event,ui)

Event triggered when a menu gains focus or when any menu item is activated.

$("#menu-1").menu({ focus: function (event, ui) { } });

select(event,ui)

Event triggered when a menu item is selected.

$("#menu-1").menu({ select: function (event, ui) { } });

Let us take some example:

Example 1

  1. <!DOCTYPE html>
  3. <head runat="server">
  5. <title></title>
  7. <link href="http://code.jquery.com/ui/1.10.4/themes/hot-sneaks/jquery-ui.css" rel="stylesheet">
  9. <script src="http://code.jquery.com/jquery-1.10.2.js">
  10. </script>
  12. <script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js">
  13. </script>
  15. <script>
  16. $(document).ready(function() {
  18. $("#menu").menu({
  19. icons: {
  20. submenu: "ui-icon-transferthick-e-w"
  21. },
  22. });
  24. });
  25. </script>
  27. <style>
  28. .ui-menu {
  29. width: 180px;
  30. margin-left: 400px;
  31. font-size: 24px;
  32. margin-top: 50px
  33. }
  35. #div1 {
  36. background-color: coral;
  37. color: ButtonHighlight;
  38. font-size: 30px;
  39. height: 450px;
  40. width: 1000px;
  41. text-align: center;
  42. margin-left: 150px
  43. }
  44. </style>
  46. </head>
  48. <body>
  50. <div id="div1">
  52. <span>************Menu*************</span>
  54. <ul id="menu">
  56. <li>
  57. <a href="#">Bihar</a>
  58. </li>
  60. <li>
  61. <a href="#">Assam</a>
  63. <ul>
  65. <li>
  66. <a href="#">Dhubri</a>
  67. </li>
  69. <li>
  70. <a href="#">Goalpara</a>
  71. </li>
  73. <li>
  74. <a href="#">Golaghat</a>
  75. </li>
  77. </ul>
  79. </li>
  81. <li>
  82. <a href="#">Haryana</a>
  84. <ul>
  86. <li>
  87. <a href="#">Bhiwani</a>
  88. </li>
  90. <li>
  91. <a href="#">Gurgaon</a>
  92. </li>
  94. <li>
  95. <a href="#">Hisar</a>
  96. </li>
  98. </ul>
  100. </li>
  102. <li class='ui-state-disabled'>
  103. <a href="#">Rajasthan</a>
  104. </li>
  106. <li>
  107. <a href="#">Goa</a>
  109. <ul>
  111. <li>
  112. <a href="#">North Goa</a>
  113. </li>
  115. <li>
  116. <a href="#">South Goa</a>
  117. </li>
  119. </ul>
  121. </li>
  123. </ul>
  125. </div>
  127. </body>
  129. </html>

Output

Output

In above example we used the “ui-state-disabled” class for li(rajasthan) item. This class is used to disable any item in the menu.

Example 2

  1. <!DOCTYPE html>
  3. <head runat="server">
  5. <title></title>
  7. <link href="http://code.jquery.com/ui/1.10.4/themes/hot-sneaks/jquery-ui.css" rel="stylesheet">
  9. <script src="http://code.jquery.com/jquery-1.10.2.js">
  10. </script>
  12. <script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js">
  13. </script>
  15. <script>
  16. $(document).ready(function() {
  18. $("#menu").menu({
  20. icons: {
  21. submenu: "ui-icon-transferthick-e-w"
  22. },
  24. items: "> :not(.ui-widget-header)"
  26. });
  28. });
  29. </script>
  31. <style>
  32. .ui-menu {
  33. width: 180px;
  34. margin-left: 400px;
  35. font-size: 24px;
  36. margin-top: 50px
  37. }
  39. #div1 {
  40. background-color: coral;
  41. color: ButtonHighlight;
  42. font-size: 30px;
  43. height: 450px;
  44. width: 1000px;
  45. text-align: center;
  46. margin-left: 150px
  47. }
  48. </style>
  50. </head>
  52. <body>
  54. <div id="div1">
  56. <span>************Menu*************</span>
  58. <ul id="menu">
  60. <li class="ui-widget-header">East India</li>
  62. <li>
  63. <a href="#">Bihar</a>
  64. </li>
  66. <li>
  67. <a href="#">Assam</a>
  69. <ul>
  71. <li>
  72. <a href="#">Dhubri</a>
  73. </li>
  75. <li>
  76. <a href="#">Goalpara</a>
  77. </li>
  79. <li>
  80. <a href="#">Golaghat</a>
  81. </li>
  83. </ul>
  85. </li>
  87. <li class="ui-widget-header">North India</li>
  89. <li>
  90. <a href="#">Haryana</a>
  92. <ul>
  94. <li>
  95. <a href="#">Bhiwani</a>
  96. </li>
  98. <li>
  99. <a href="#">Gurgaon</a>
  100. </li>
  102. <li>
  103. <a href="#">Hisar</a>
  104. </li>
  106. </ul>
  108. </li>
  110. <li class='ui-state-disabled'>
  111. <a href="#">Rajasthan</a>
  112. </li>
  114. <li class="ui-widget-header">South India</li>
  116. <li>
  117. <a href="#">Goa</a>
  119. <ul>
  121. <li>
  122. <a href="#">North Goa</a>
  123. </li>
  125. <li>
  126. <a href="#">South Goa</a>
  127. </li>
  129. </ul>
  131. </li>
  133. <li class="ui-widget-header">West Indian</li>
  135. <li>
  136. <a href="#">Gujarat</a>
  137. </li>
  139. </ul>
  141. </div>
  143. </body>
  145. </html>

Output

output

Item option defines selector for the elements that serve as the menu items. In above example we used the item option to create the different category of states.