How to implement categories menu using jQuery UI ?

How to implement categories menu using jQuery UI ?

Last Updated : 18 Jan, 2021

In this article, we will learn about how to configure items in such a way that which elements are converted into selectable menu items. We can use this technique to create category headers. And rest of the items can be used as selectable.

Syntax:

$( "#selector" ).menu({ items: "> :not(.selector)" });

Parameters: This method accept one parameter as items.

Return Value: This method doesn't return anything.

Script that needs to be added :

Please download the library first then use the path for the given script below.

<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> <link rel="stylesheet" href="/https/www.geeksforgeeks.org/resources/demos/style.css"> <script src="https://code.jquery.com/jquery-1.12.4.js"></script> <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

Example: In this example, we have created two list one for programming language categories and the other is libraries. Here we have applied this method on both of our headings of the different categories.

HTML

<!doctype html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content=
        "width=device-width, initial-scale=1">

    <link rel="stylesheet" href=
        "~/jquery-ui-1.12.1.custom//jquery-ui.css">

    <script src=
        "https://code.jquery.com/jquery-1.12.4.js">
    </script>
    
    <script src=
    "https://code.jquery.com/ui/1.12.1/jquery-ui.js">
    </script>
    
    <script>
        $(function () {
            $("#menu").menu({
                items: "> :not(.widget-header)"
            });
        });
    </script>
    <style>
        #menu {
            width: 300px;
        }

        .widget-header {
            padding: 0.3em;
            color: white;
        }
    </style>
</head>

<body>
    <h3>Geeks for Geeks Menu Using jQuery UI</h3>

    <ul id="menu">
        <li class="widget-header">
            <div style="background-color: green;">
                Programming Languages
            </div>
        </li>
        <li>
            <div>Python</div>
        </li>
        <li>
            <div>Javascript</div>
        </li>
        <li>
            <div>Java</div>
        </li>
        <li class="widget-header">
            <div style="background-color: green;">
                Libraries
            </div>
        </li>
        <li>
            <div>Tensorflow</div>
        </li>
        <li>
            <div>Pandas</div>
        </li>
        <li>
            <div>Numpy</div>
        </li>
    </ul>
</body>

</html>

Output :

How to implement categories menu using jQuery UI ?

J

Jitender_1998

Improve

Article Tags :

Similar Reads

How to make basic menu using jQuery UI ?

jQuery UI consists of GUI widgets, visual effects, and themes implemented using jQuery, CSS, and HTML. jQuery UI is great for building UI interfaces for the webpages. jQuery UI menu is a Themeable menu that is used with mouse and keyboard interactions for navigating between pages. In this article, w

jQuery UI Menu create Event

jQuery UI consists of GUI widgets, visual effects, and themes implemented using HTML, CSS, and jQuery. It is great for building UI interfaces for the webpages. The jQuery UI Menu widget creates a menu list that is used for mouse and keyboard interactions. The jQuery UI Menu creates event triggers wh

How to enable a jQuery UI menu ?

jQuery UI consists of GUI widgets, visual effects, and themes implemented using jQuery, CSS, and HTML. jQuery UI is great for building UI interfaces for the webpages. jQuery UI menu is a Themeable menu that is used with mouse and keyboard interactions for navigating between pages. In this article, w

How to create a Menu popup using jQuery Mobile ?

jQuery Mobile is a web based technology used to make responsive content that can be accessed on all smartphones, tablets and desktops. In this article, we will be creating menu popup button using jQuery Mobile. Approach: Add jQuery Mobile scripts needed for your project. <link rel=â€stylesheetâ€ hr

How to disable a jQuery UI menu?

In this article we will disable a jQuery UI menu Syntax: $(".selector").menu( "disable" );Learn more about selectors and menu options in jQuery. Approach: First, add jQuery UI scripts needed for your project. <link href = "https://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css" rel =