jQuery UI | Menu

Menu widget in jQuery UI creates a menu that contains items and sub-items in a sub-menu related to a particular item on the menu. Menu items are created using mark-up elements using a parent-child like relation which can be created using lists and nested lists. Each menu item generally corresponds to a specific page and hence each of these elements is between an anchored tag.

Syntax:

$(selector, context).menu(options)

You can provide one or more options at a time using a JavaScript object.

If there is more than one choice to be provided then you may separate them using a comma as follows

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

For navigation, we can create a menu by using jQuery UI. We can create a main menu and sub-menu by using the menu. We will create one list and sub-list in HTML and that will be used to create the menu using jQuery UI.



  • Width of the menu: According to your layout and style, the menu may take different width, we may require to adjust the width so we can keep this style properties inside our head tag.

    Example 1:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!DOCTYPE html>
    <html>
      
    <head>
        <link href=
            rel='stylesheet'>
          
        <script src=
        </script>
          
        <script src=
        </script>
      
        <style>
            .ui-menu {
                width: 8em;
            }
        </style>
    </head>
      
    <body>
        <br><br>
          
        <ul id='my_cs_menu'>
            <li>
                <div>Networking</div>
            </li>
              
            <li>
                <div>Office Mgmt</div>
                <ul>
                    <li>
                        <div>Word</div>
                    </li>
                    <li>
                        <div>Excel</div>
                    </li>
                    <li>
                        <div>Power Point</div>
                    </li>
                    <li>
                        <div>Access</div>
                    </li>
                </ul>
            </li>
              
            <li>
                <div>Programming</div>
                <ul>
                    <li>
                        <div>Backend</div>
                        <ul>
                            <li>
                                <div>PHP</div>
                            </li>
                            <li>
                                <div>Python</div>
                            </li>
                            <li>
                                <div>JSP</div>
                            </li>
                        </ul>
                    </li>
                    <li>
                        <div>Frontend</div>
                    </li>
                </ul>
            </li>
      
            <li>
                <div>Games</div>
            </li>
        </ul>
      
        <script>
            $(document).ready(function() {
                $("#my_cs_menu").menu();
            })
        </script>
    </body>
      
    </html>

    chevron_right

    
    

  • Disabling Menu: We can disable a menu by using the disable option and setting its value to true. By default, the value is set as false.

    Example 2:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!DOCTYPE html>
    <html>
      
    <head>
        <link href=
            rel='stylesheet'>
          
        <script src=
        </script>
      
        <script src=
        </script>
      
        <style>
            .ui-menu {
                width: 8em;
            }
        </style>
    </head>
      
    <body>
        <br><br>
          
        <ul id='my_cs_menu'>
            <li>
                <div>Networking</div>
            </li>
              
            <li>
                <div>Office Mgmt</div>
                <ul>
                    <li>
                        <div>Word</div>
                    </li>
                    <li>
                        <div>Excel</div>
                    </li>
                    <li>
                        <div>Power Point</div>
                    </li>
                    <li>
                        <div>Access</div>
                    </li>
                </ul>
            </li>
              
            <li>
                <div>Programming</div>
                <ul>
                    <li>
                        <div>Backend</div>
                        <ul>
                            <li>
                                <div>PHP</div>
                            </li>
                            <li>
                                <div>Python</div>
                            </li>
                            <li>
                                <div>JSP</div>
                            </li>
                        </ul>
                    </li>
                    <li>
                        <div>Frontend</div>
                    </li>
                </ul>
            </li>
      
            <li>
                <div>Games</div>
            </li>
        </ul>
      
        <script>
            $(document).ready(function() {
                $("#my_cs_menu").menu({
                    disabled: true
                });
            })
        </script>
    </body>
      
    </html>

    chevron_right

    
    

  • Icons: To point to sub-menus from the main-menu we can use icons. We can change the icons as per our choice. We can assign other values like: ui-icon-circle-triangle-e, ui-icon-arrow-1-e, ui-icon-arrowthick-1-e, ui-icon-triangle-1-e

    Example 3:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!DOCTYPE html>
    <html>
      
    <head>
        <link href=
            rel='stylesheet'>
          
        <script src=
        </script>
          
        <script src=
        </script>
      
        <style>
            .ui-menu {
                width: 8em; 
            }
        </style>
    </head>
      
    <body>
        <ul id='my_cs_menu'>
            <li>
                <div>Networking</div>
            </li>
              
            <li>
                <div>Office Mgmt</div>
                <ul>
                    <li>
                        <div>Word</div>
                    </li>
                    <li>
                        <div>Excel</div>
                    </li>
                    <li>
                        <div>Power Point</div>
                    </li>
                    <li>
                        <div>Access</div>
                    </li>
                </ul>
            </li>
              
            <li>
                <div>Programming</div>
      
                <ul>
                    <li>
                        <div>Backend</div>
                        <ul>
                            <li>
                                <div>PHP</div>
                            </li>
                            <li>
                                <div>Python</div>
                            </li>
                            <li>
                                <div>JSP</div>
                            </li>
                        </ul>
                    </li>
                    <li>
                        <div>Frontend</div>
                    </li>
                </ul>
            </li>
      
            <li>
                <div>Games</div>
            </li>
        </ul>
      
        <script>
            $(document).ready(function() {
                $("#my_cs_menu").menu({
                    menus: 'ul'
                });
            })
        </script>
    </body>
      
    </html>

    chevron_right

    
    

  • Menus: We can set the selector for the menu elements. By default, it is ul, we can change this value to other elements like div.

    Note: The output will remain same as of example 2.

    Example 4:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!DOCTYPE html>
    <html>
      
    <head>
        <link href=
            rel='stylesheet'>
          
        <script src=
        </script>
          
        <script src=
        </script>
      
        <style>
            .ui-menu {
                width: 8em;
            }
        </style>
    </head>
      
    <body>
        <ul id='my_cs_menu'>
            <li>
                <div>Networking</div>
            </li>
            <li>
                <div>Office Mgmt</div>
                <ul>
                    <li>
                        <div>Word</div>
                    </li>
                    <li>
                        <div>Excel</div>
                    </li>
                    <li>
                        <div>Power Point</div>
                    </li>
                    <li>
                        <div>Access</div>
                    </li>
                </ul>
            </li>
            <li>
                <div>Programming</div>
      
                <ul>
                    <li>
                        <div>Backend</div>
                        <ul>
                            <li>
                                <div>PHP</div>
                            </li>
                            <li>
                                <div>Python</div>
                            </li>
                            <li>
                                <div>JSP</div>
                            </li>
                        </ul>
                    </li>
                    <li>
                        <div>Frontend</div>
                    </li>
                </ul>
            </li>
      
            <li>
                <div>Games</div>
            </li>
        </ul>
      
        <script>
            $(document).ready(function() {
                $("#my_cs_menu").menu({
                    menus: 'ul'
                });
            })
        </script>
    </body>
      
    </html>

    chevron_right

    
    

  • Position in Menu: We can set the position of the sub-menu relative to main menu by setting the position value.
    Here we have used this position value to set the position of sub-menu list.

    position: { my: "left bottom", at: "right top" }
    • my: It is the tooltip box.
    • at: The element for which the tooltip is displayed.
    • All horizontal alignment can take three positions: left, right or center
    • All vertical alignment can take three positions: top or bottom or center

    Example 5:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!DOCTYPE html>
    <html>
      
    <head>
        <link href=
            rel='stylesheet'>
          
        <script src=
        </script>
          
        <script src=
        </script>
      
        <style>
            .ui-menu {
                width: 8em;
            }
        </style>
    </head>
      
    <body>
        <br><br><br><br><br><br>
          
        <ul id='my_cs_menu'>
            <li>
                <div>Networking</div>
            </li>
            <li>
                <div>Office Mgmt</div>
                <ul>
                    <li>
                        <div>Word</div>
                    </li>
                    <li>
                        <div>Excel</div>
                    </li>
                    <li>
                        <div>Power Point</div>
                    </li>
                    <li>
                        <div>Access</div>
                    </li>
                </ul>
            </li>
            <li>
                <div>Programming</div>
      
                <ul>
                    <li>
                        <div>Backend</div>
                        <ul>
                            <li>
                                <div>PHP</div>
                            </li>
                            <li>
                                <div>Python</div>
                            </li>
                            <li>
                                <div>JSP</div>
                            </li>
                        </ul>
                    </li>
                    <li>
                        <div>Frontend</div>
                    </li>
                </ul>
            </li>
      
            <li>
                <div>Games</div>
            </li>
        </ul>
          
        <script>
            $(document).ready(function() {
                $("#my_cs_menu").menu({
                    position: {
                        my: "left bottom",
                        at: "right top"
                    }
                });
            })
        </script>
    </body>
      
    </html>

    chevron_right

    
    

  • Blur: We can Trigger any script by associating it with blur method of menu. In the below example, We will collect the name of the element from which we just moved out by using blur method.

    Example 6:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!DOCTYPE html>
    <html>
      
    <head>
        <link href=
            rel='stylesheet'>
          
        <script src=         
        </script>
          
        <script src=
        </script>
      
        <style>
            .ui-menu {
                width: 8em;
            }
        </style>
    </head>
      
    <body>
        <br><br><br><br>
      
        <div id=display></div>
          
        <br><br>
          
        <ul id='my_cs_menu'>
            <li>
                <div>Networking</div>
            </li>
            <li>
                <div>Office Mgmt</div>
                <ul>
                    <li>
                        <div>Word</div>
                    </li>
                    <li>
                        <div>Excel</div>
                    </li>
                    <li>
                        <div>Power Point</div>
                    </li>
                    <li>
                        <div>Access</div>
                    </li>
                </ul>
            </li>
            <li>
                <div>Programming</div>
      
                <ul>
                    <li>
                        <div>Backend</div>
                        <ul>
                            <li>
                                <div>PHP</div>
                            </li>
                            <li>
                                <div>Python</div>
                            </li>
                            <li>
                                <div>JSP</div>
                            </li>
                        </ul>
                    </li>
                    <li>
                        <div>Frontend</div>
                    </li>
                </ul>
            </li>
            <li>
                <div>Games</div>
            </li>
        </ul>
      
        <script>
            $(document).ready(function() {
                $("#my_cs_menu").menu({
                    blur: function(event, ui) {
                        $('#display').html(" <b>Moved From: </b>"
                                + ui.item.text());
                    }
                });
            })
        </script>
    </body>
      
    </html>

    chevron_right

    
    

  • Destroy: We can apply destroy event and remove the functionality of menu and initiate the menu again by using click event of radio button.

    Example 7:

    filter_none

    edit
    close

    play_arrow

    link
    brightness_4
    code

    <!DOCTYPE html>
    <html>
      
    <head>
        <link href=
            rel='stylesheet'>
          
        <script src=
        </script>
          
        <script src=
        </script>
      
        <style>
            .ui-menu {
                width: 8em;
            }
        </style>
    </head>
      
    <body>
        <br><br><br><br>
          
        <div id=display>Display here</div>
        <br><br>
          
        <input type='radio'
            name='r_select'
            id='r2'
            value='destroy'>destroy
          
        <input type='radio'
            name='r_select'
            id='r2'
            value='initialize'>initialize
        <br>
      
        <div id=display></div>
        <br><br>
          
        <ul id='my_cs_menu'>
            <li>
                <div>Networking</div>
            </li>
            <li>
                <div>Office Mgmt</div>
                <ul>
                    <li>
                        <div>Word</div>
                    </li>
                    <li>
                        <div>Excel</div>
                    </li>
                    <li>
                        <div>Power Point</div>
                    </li>
                    <li>
                        <div>Access</div>
                    </li>
                </ul>
            </li>
            <li>
                <div>Programming</div>
      
                <ul>
                    <li>
                        <div>Backend</div>
                        <ul>
                            <li>
                                <div>PHP</div>
                            </li>
                            <li>
                                <div>Python</div>
                            </li>
                            <li>
                                <div>JSP</div>
                            </li>
                        </ul>
                    </li>
                    <li>
                        <div>Frontend</div>
                    </li>
                </ul>
            </li>
      
            <li>
                <div>Games</div>
            </li>
        </ul>
      
        <script>
            $(document).ready(function() {
                $("#my_cs_menu").menu({
                });
                  
                $("input:radio[name=r_select]").click(function() {
                    var selection = $(this).val()
                      
                    if (selection == 'destroy') {
                        $("#my_cs_menu").menu(selection);
                        $('#display').html(
                            " <b>destroy method invoked</b>");
                    }
                    if (selection == 'initialize') {
                        $("#my_cs_menu").menu();
                        $('#display').html(
                            " <b>Menu Initialized</b>");
                    }
                })
            })
        </script>
    </body>
      
    </html>

    chevron_right

    
    




My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.