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=”/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> 