JQuery

JQueryUI - Day 10 (Menu)

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>  
  2.   
  3. <head runat="server">  
  4.   
  5.     <title></title>  
  6.   
  7.     <link href="http://code.jquery.com/ui/1.10.4/themes/blitzer/jquery-ui.css" rel="stylesheet">  
  8.   
  9.         <script src="http://code.jquery.com/jquery-1.10.2.js">  
  10.             </script>  
  11.   
  12.             <script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js">  
  13.                 </script>  
  14.   
  15.                 <script>  
  16.                     $(document).ready(function() {  
  17.   
  18.                         $("#menu-1").menu({  
  19.   
  20.                             icons: {  
  21.                                 submenu: "ui-icon-transferthick-e-w"  
  22.                             },  
  23.   
  24.                             "select": function(event, ui) {  
  25.   
  26.                                 alert(ui.item.text());  
  27.   
  28.                             }  
  29.                         });  
  30.   
  31.                     });  
  32.                 </script>  
  33.   
  34.                 <style>  
  35.                     .ui-menu {  
  36.                         width: 180px;  
  37.                         margin-left: 400px;  
  38.                         font-size: 24px;  
  39.                         margin-top: 50px  
  40.                     }  
  41.                      
  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>  
  52.   
  53.                 </head>  
  54.   
  55.                 <body>  
  56.   
  57.                     <div id="div1">  
  58.   
  59.                         <span>************Menu*************</span>  
  60.   
  61.                         <ul id="menu-1">  
  62.   
  63.                             <li>  
  64.                                 <a href="#">Element1</a>  
  65.                             </li>  
  66.   
  67.                             <li>  
  68.                                 <a href="#">Element2</a>  
  69.                             </li>  
  70.   
  71.                             <li>  
  72.                                 <a href="#">Element3</a>  
  73.   
  74.                                     <ul>  
  75.   
  76.                                         <li>  
  77.                                             <a href="#">Element3-1</a>  
  78.                                         </li>  
  79.   
  80.                                         <li>  
  81.                                             <a href="#">Element3-2</a>  
  82.                                         </li>  
  83.   
  84.                                         <li>  
  85.                                             <a href="#">Element3-3</a>  
  86.                                         </li>  
  87.   
  88.                                     </ul>  
  89.   
  90.                             </li>  
  91.   
  92.                             <li>  
  93.                                 <a href="#">Element4</a>  
  94.                             </li>  
  95.   
  96.                             </ul>  
  97.   
  98.                             </div>  
  99.   
  100.                 </body>  
  101.   
  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>  
  2.   
  3. <head runat="server">  
  4.   
  5.     <title></title>  
  6.   
  7.     <link href="http://code.jquery.com/ui/1.10.4/themes/hot-sneaks/jquery-ui.css" rel="stylesheet">  
  8.   
  9.         <script src="http://code.jquery.com/jquery-1.10.2.js">  
  10.             </script>  
  11.   
  12.             <script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js">  
  13.                 </script>  
  14.   
  15.                 <script>  
  16.                     $(document).ready(function() {  
  17.   
  18.                         $("#menu").menu({  
  19.                             icons: {  
  20.                                 submenu: "ui-icon-transferthick-e-w"  
  21.                             },  
  22.                         });  
  23.   
  24.                     });  
  25.                 </script>  
  26.   
  27.                 <style>  
  28.                     .ui-menu {  
  29.                         width: 180px;  
  30.                         margin-left: 400px;  
  31.                         font-size: 24px;  
  32.                         margin-top: 50px  
  33.                     }  
  34.                      
  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>  
  45.   
  46.                 </head>  
  47.   
  48.                 <body>  
  49.   
  50.                     <div id="div1">  
  51.   
  52.                         <span>************Menu*************</span>  
  53.   
  54.                         <ul id="menu">  
  55.   
  56.                             <li>  
  57.                                 <a href="#">Bihar</a>  
  58.                             </li>  
  59.   
  60.                             <li>  
  61.                                 <a href="#">Assam</a>  
  62.   
  63.                                     <ul>  
  64.   
  65.                                         <li>  
  66.                                             <a href="#">Dhubri</a>  
  67.                                         </li>  
  68.   
  69.                                         <li>  
  70.                                             <a href="#">Goalpara</a>  
  71.                                         </li>  
  72.   
  73.                                         <li>  
  74.                                             <a href="#">Golaghat</a>  
  75.                                         </li>  
  76.   
  77.                                     </ul>  
  78.   
  79.                             </li>  
  80.   
  81.                             <li>  
  82.                                 <a href="#">Haryana</a>  
  83.   
  84.                                     <ul>  
  85.   
  86.                                         <li>  
  87.                                             <a href="#">Bhiwani</a>  
  88.                                         </li>  
  89.   
  90.                                         <li>  
  91.                                             <a href="#">Gurgaon</a>  
  92.                                         </li>  
  93.   
  94.                                         <li>  
  95.                                             <a href="#">Hisar</a>  
  96.                                         </li>  
  97.   
  98.                                     </ul>  
  99.   
  100.                             </li>  
  101.   
  102.                             <li class='ui-state-disabled'>  
  103.                                 <a href="#">Rajasthan</a>  
  104.                                     </li>  
  105.   
  106.                                     <li>  
  107.                                         <a href="#">Goa</a>  
  108.   
  109.                                             <ul>  
  110.   
  111.                                                 <li>  
  112.                                                     <a href="#">North Goa</a>  
  113.                                                 </li>  
  114.   
  115.                                                 <li>  
  116.                                                     <a href="#">South Goa</a>  
  117.                                                 </li>  
  118.   
  119.                                             </ul>  
  120.   
  121.                                     </li>  
  122.   
  123.                                     </ul>  
  124.   
  125.                                     </div>  
  126.   
  127.                 </body>  
  128.   
  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>  
  2.   
  3. <head runat="server">  
  4.   
  5.     <title></title>  
  6.   
  7.     <link href="http://code.jquery.com/ui/1.10.4/themes/hot-sneaks/jquery-ui.css" rel="stylesheet">  
  8.   
  9.         <script src="http://code.jquery.com/jquery-1.10.2.js">  
  10.             </script>  
  11.   
  12.             <script src="http://code.jquery.com/ui/1.10.4/jquery-ui.js">  
  13.                 </script>  
  14.   
  15.                 <script>  
  16.                     $(document).ready(function() {  
  17.   
  18.                         $("#menu").menu({  
  19.   
  20.                             icons: {  
  21.                                 submenu: "ui-icon-transferthick-e-w"  
  22.                             },  
  23.   
  24.                             items: "> :not(.ui-widget-header)"  
  25.   
  26.                         });  
  27.   
  28.                     });  
  29.                 </script>  
  30.   
  31.                 <style>  
  32.                     .ui-menu {  
  33.                         width: 180px;  
  34.                         margin-left: 400px;  
  35.                         font-size: 24px;  
  36.                         margin-top: 50px  
  37.                     }  
  38.                      
  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>  
  49.   
  50.                 </head>  
  51.   
  52.                 <body>  
  53.   
  54.                     <div id="div1">  
  55.   
  56.                         <span>************Menu*************</span>  
  57.   
  58.                         <ul id="menu">  
  59.   
  60.                             <li class="ui-widget-header">East India</li>  
  61.   
  62.                                 <li>  
  63.                                     <a href="#">Bihar</a>  
  64.                                 </li>  
  65.   
  66.                                 <li>  
  67.                                     <a href="#">Assam</a>  
  68.   
  69.                                         <ul>  
  70.   
  71.                                             <li>  
  72.                                                 <a href="#">Dhubri</a>  
  73.                                             </li>  
  74.   
  75.                                             <li>  
  76.                                                 <a href="#">Goalpara</a>  
  77.                                             </li>  
  78.   
  79.                                             <li>  
  80.                                                 <a href="#">Golaghat</a>  
  81.                                             </li>  
  82.   
  83.                                         </ul>  
  84.   
  85.                                 </li>  
  86.   
  87.                                 <li class="ui-widget-header">North India</li>  
  88.   
  89.                                     <li>  
  90.                                         <a href="#">Haryana</a>  
  91.   
  92.                                             <ul>  
  93.   
  94.                                                 <li>  
  95.                                                     <a href="#">Bhiwani</a>  
  96.                                                 </li>  
  97.   
  98.                                                 <li>  
  99.                                                     <a href="#">Gurgaon</a>  
  100.                                                 </li>  
  101.   
  102.                                                 <li>  
  103.                                                     <a href="#">Hisar</a>  
  104.                                                 </li>  
  105.   
  106.                                             </ul>  
  107.   
  108.                                     </li>  
  109.   
  110.                                     <li class='ui-state-disabled'>  
  111.                                         <a href="#">Rajasthan</a>  
  112.                                             </li>  
  113.   
  114.                                             <li class="ui-widget-header">South India</li>  
  115.   
  116.                                                 <li>  
  117.                                                     <a href="#">Goa</a>  
  118.   
  119.                                                         <ul>  
  120.   
  121.                                                             <li>  
  122.                                                                 <a href="#">North Goa</a>  
  123.                                                             </li>  
  124.   
  125.                                                             <li>  
  126.                                                                 <a href="#">South Goa</a>  
  127.                                                             </li>  
  128.   
  129.                                                         </ul>  
  130.   
  131.                                                 </li>  
  132.   
  133.                                                 <li class="ui-widget-header">West Indian</li>  
  134.   
  135.                                                     <li>  
  136.                                                         <a href="#">Gujarat</a>  
  137.                                                     </li>  
  138.   
  139.                                                     </ul>  
  140.   
  141.                                                     </div>  
  142.   
  143.                 </body>   
  144.   
  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.
 

Up Next
    Ebook Download
    View all
    Learn
    View all
    Get Started

    You need to be a premium member to use this feature. To access it, you'll have to upgrade your membership.

    Become a sharper developer and jumpstart your career.

    Basic

    $0

    $

    . 00

    monthly

    For Basic members:

    • Standard Profile
    • Access learning courses
    • Access free e-books
    • 1x point
    Premium

    $20

    $

    . 00

    monthly

    For Premium members:

    • Earn 2x reward points
    • Premium profile with Verified check
    • Premium Avatar with status update
    • Learning courses
    • Unlimited Certifications and badges on profile
    • Unlimited Book downloads
    • Access to Premium content
    • Online Training
    • Unlimited PDF conversions and downloads
    • Professional Resume Writing
    • Interview Preparations Guide
    • 25 messages per month
    • 1 "Kodzu" avatar, basic
    Elite

    $45

    $

    . 00

    monthly

    For Elite members:

    • Bundle E-books
    • Access to all Learn Series
    • Unlimited Apply Jobs