jQuery UI | Menu

Last Updated : 17 Dec, 2019

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:

html

<!DOCTYPE html>
<html>

<head>
    <link href=
'https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/ui-lightness/jquery-ui.css'
        rel='stylesheet'>
    
    <script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js">
    </script>
    
    <script src=
"https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js">
    </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>

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:

html

<!DOCTYPE html>
<html>

<head>
    <link href=
'https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/ui-lightness/jquery-ui.css'
        rel='stylesheet'>
    
    <script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js">
    </script>

    <script src=
"https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js">
    </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>

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:

html

<!DOCTYPE html>
<html>

<head>
    <link href=
'https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/ui-lightness/jquery-ui.css'
        rel='stylesheet'>
    
    <script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js">
    </script>
    
    <script src=
"https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js">
    </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>

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:

html

<!DOCTYPE html>
<html>

<head>
    <link href=
'https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/ui-lightness/jquery-ui.css'
        rel='stylesheet'>
    
    <script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js">
    </script>
    
    <script src=
"https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js">
    </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>

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:

html

<!DOCTYPE html>
<html>

<head>
    <link href=
'https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/ui-lightness/jquery-ui.css'
        rel='stylesheet'>
    
    <script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js">
    </script>
    
    <script src=
"https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js">
    </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>

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:

html

<!DOCTYPE html>
<html>

<head>
    <link href=
'https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/ui-lightness/jquery-ui.css'
        rel='stylesheet'>
    
    <script src=         
"https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js">
    </script>
    
    <script src=
"https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js">
    </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>

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:

html

<!DOCTYPE html>
<html>

<head>
    <link href=
'https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/ui-lightness/jquery-ui.css'
        rel='stylesheet'>
    
    <script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js">
    </script>
    
    <script src=
"https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js">
    </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>

Getting Started with jQuery

mayeshmohapatra

Improve

Article Tags :

jQuery UI | Menu

Similar Reads

jQuery Selectors

jQuery Events

jQuery Effects

jQuery HTML/CSS

jQuery Traversing

Thank You!

What kind of Experience do you want to share?