Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to Enable a jQuery UI Menu ?
Jquery is a fast and simple Javascript library which is used to make a client−side through HTML, It simplifies some of the Javascript functions like, DOM Manipulation,traversal, Event Handling and AJAX calls. This also has Cross−Browser compatibility.
What is a jQuery UI menu?
jQuery UI menu is Component built on the core of jQuery UI which is used to create drop−down menus and other navigation menu options. These menus can be accessed by mouse pointer as well as keyboard clicks. This also allows the developers to create menus and apply customs styles and themes. These menus include hierarchical menus which include menus and submenus.
Some of the important features of jQuey UI Menu:
Events and callbacks: jQuery UI Menu allows the developers to handle user interactions and customize the behavior of the menu, this supports a wide range of events and callbacks such as blur, create, focus and select.
Keyboard Navigation: This allows users to navigate in the menu through the arrow keys of the keyboard and Enter/Space is used to open/engage the menu item’s action. Also escape is used to close the current menu/submenu.
Approach 1: Using menu() method
Using the .menu() method of jQuery UI Menu widget to enable a jQuery UI menu along with <ul> and <li> items.
Algorithm
Step 1: Create a HTML file, Include jQuery and jQuery UI library in the <head> tag. Then create list items by using <ul> and <li>.
Step 2: Now assign an id to the list items.
Step 3: Now inside the <script> tag, initialize the menu items using the .menu() method. This has to be done after the DOM has loaded and wrap the initialisation code inside the ready() function as this will ensure that it runs after the page is loaded.
Example
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JQuery UI Menu</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://code.jquery.com/ui/1.13.0/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.13.0/themes/base/jquery-ui.css">
<script>
$(document).ready(function() {
$("#items").menu();
});
</script>
</head>
<body>
<div style="text-align: center;">
<h2>Tutorials Point Menu Items</h2>
<ul id="items">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</div>
</body>
</html>
Approach 2: Using data−widget attribute with menu() method.
Another viable technique involves employing the data−widget attribute alongside the menu() function within jQuery UI. This attribute functions as a tool for identifying HTML elements, which can then be initialized using said function.
Algorithm
Step 1: Import jQuery and jQuery UI Library and Scripts in <head> section of HTML file.
Step 2: Add <ul> and <li> elements to create list items and then add an unique id to <ul> tag.
Step 3: Set the ‘data−widget’ attribute to the top level <ul> and set the value of <ul> element to "menu".
Step 4: Inside <script> tag, Select the “data−widget” attribute and enable UI menu using menu() method.
Example
<!DOCTYPE html>
<html>
<head>
<title>jQuery UI Menu Example</title>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.13.0/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://code.jquery.com/ui/1.13.0/jquery-ui.min.js"></script>
<script>
$(document).ready(function() {
$("[data-widget='menu']").menu({
position: { my: "left top", at: "right top" }
});
});
</script>
<style>
.ui-menu {
width: 8em;
}
</style>
</head>
<body style="text-align: center;">
<h2>Tutorials Point Menu Items</h2>
<ul data-widget="menu">
<li>Courses</li>
<li>
<div>Programming</div>
<ul>
<li>
<div>Python</div>
</li>
<li>
<div>Java</div>
</li>
<li>
<div>Javascript</div>
</li>
<li>
<div>C++</div>
</li>
</ul>
</li>
<li>
<div>Web</div>
<ul>
<li>
<div>Backend</div>
<ul>
<li>
<div>Node.js</div>
</li>
</ul>
</li>
<li>
<div>Frontend</div>
</li>
</ul>
</li>
<li>
<div>Mobile</div>
</li>
</ul>
</body>
</html>
Approach 3 : Using each() method
To enhance a jQuery UI menu, an alternative technique would involve leveraging the each() function. This would enable us to navigate through individual menu elements and subsequently execute the .menu() operation.
Algorithm
Step 1: Include jQuery and jQuery UI library in the <head> tag.
Step 2: Add an unique id name to <ul> tag which is at the top most level.
Step 3: Use each() method to iterate over each element with the menu class and then call .menu() method.
Example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JQuery UI Menu</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://code.jquery.com/ui/1.13.0/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.13.0/themes/base/jquery-ui.css">
<script>
$(document).ready(function() {
$(".menu").each(function() {
$(this).menu();
});
});
</script>
</head>
<body>
<div style="text-align: center;">
<h2>Tutorials Point Menu Items</h2>
<ul class="menu">
<li><a href="#">Menu Item 1</a></li>
<li><a href="#">Menu Item 2</a>
<ul>
<li><a href="#">Submenu Item 1</a></li>
<li><a href="#">Submenu Item 2</a></li>
<li><a href="#">Submenu Item 3</a></li>
</ul>
</li>
<li><a href="#">Menu Item 3</a></li>
</ul>
<ul class="menu">
<li><a href="#">Menu Item A</a></li>
<li><a href="#">Menu Item B</a>
<ul>
<li><a href="#">Submenu Item X</a></li>
<li><a href="#">Submenu Item Y</a></li>
<li><a href="#">Submenu Item Z</a></li>
</ul>
</li>
<li><a href="#">Menu Item C</a></li>
</ul>
</div>
</body>
</html>
Conclusion
The above three methods can be used to enable a jQuery UI menu.You can use any of the three above methods, but the most easy to use .menu() method, this can be more customized using CSS styles. These menu items can be used with events and methods such as collapse, focus, blur and many more to make these menu items more interactive.
143 Views
