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 make basic menu using jQuery UI?
Many websites as well as applications must have menus because they offer a simple and orderly way to navigate between different pages and functionalities. While there are numerous approaches to building menus utilizing HTML, CSS, as well as JavaScript, jQuery UI offers a simple intuitive technology that can help you save time and effort. The fundamentals of building a menu using jQuery UI will be covered in this post, along with the necessary stages and starter samples. This article will give you the resources you need, whether you're an experienced developer or a novice, to make a useful and appealing menu for your website or application with JQuery UI.
Menu widget in JQuery
Pop-up menus are incorporated into the main menu bar of the jQuery UI Menu widget. There are sub-popup menus for a few of the popup menu items. When the parent-child connection is upheld, markup elements can be utilized to generate these menus.
The menu() method is utilized by the jQuery UI to build menus.
Approaches
To make a basic menu utilizing JQuery UI the two methods −
Utilizing the menu widget in JQuery
Utilizing the menu widget in JQuery with a sub-menu.
Let us look into both approaches −
Approach 1: Utilizing the menu widget in JQuery
jQuery UI's Menu widget is one tool you can employ to build a menu. A flexible as well as configurable method for making menus with different levels of nesting is offered by the Menu widget. This approach is perfect for creating dropdown or navigation menus. One has to incorporate the required jQuery UI files and initialize the Menu widget utilizing your HTML markup to use it.
Algorithm
To make a basic menu utilizing JQuery UI follow these steps −
Step 1 − Add both the jQuery library and the jQuery UI library in the HTML section for adding menu() function as UI.
Step 2 − With the help of an unordered list create menu options. Utilize list tags and anchor tags.
Step 3 − Set id =”optionMenu”, which can be utilized to connect with the menu() function associated with JQuery UI.
Step 4 − Add styles as inline css for <a> tags to enhance the appearance of the page.
Example
<!DOCTYPE html>
<html>
<head>
<title>jQuery UI Menu Widget</title>
<script src="//code.jquery.com/jquery-3.5.1.js"></script>
<script src="//code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
</head>
<body>
<ul id="optionMenu">
<li><a style="color:blue" href="#">First in Menu</a></li>
<li><a style="color:blue" href="#">Second in Menu</a></li>
<li><a style="color:blue" href="#">Third in Menu</a></li>
</ul>
<script>
$(function() {
$( "#optionMenu" ).menu();
});
</script>
</body>
</html>
Approach 2
Utilizing the datepicker() function with a customization option.
Algorithm
To make a basic menu utilizing JQuery UI follow these steps −
Step 1 − Add both the jQuery library as well as the jQuery UI library in the HTML section for adding menu() function as UI.
Step 2 − With the help of an unordered list create menu options. Utilize list tags and div tags.
Step 3 − Add more nested list tags for the submenu.
Step 4 − Set id =”Menu”, which can be utilized to connect with the menu() function associated with JQuery UI.
Step 5 − Add styles as inline css for <a> tags to enhance the appearance of the page.
Example
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="//code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<script src="https://code.jquery.com/ui/1.13.2/jquery-ui.js"></script>
<script>
$( function() {
$( "#menu" ).menu();
} );
</script>
<style>
.ui-menu { width: 150px; }
</style>
</head>
<body>
<h1>Menu</h1>
<ul id="menu">
<li><div>First in Menu</div>
<ul>
<li><div>First Menu Submenu 1</div></li>
<li><div>First Menu Submenu 2</div></li>
</ul>
</li>
<li><div>Second in Menu</div></li>
<li><div>Third in Menu</div>
<ul>
<li><div>Third in Menu Submenu 1</div>
<ul>
<li><div>Submenu 1's submenu 1 </div></li>
<li><div>Submenu 1's submenu 2</div></li>
</ul>
</li>
<li><div>Third in Menu Submenu 2</div>
<ul>
<li><div>Submenu 2's submenu 1</div></li>
<li><div>Submenu 2's submenu 2</div></li>
<li><div>Submenu 2's submenu 3</div></li>
</ul>
</li>
<li><div>Forth in Menu</div></li>
</ul>
</li>
</ul>
</body>
</html>
Conclusion
Developers can save time and effort by employing the straightforward jQuery UI to create menus. In addition to generating nested menus and adjusting styles, this article covers the fundamental procedures and methods for creating menus using the jQuery UI Menu widget. These procedures can be used by developers to make menus for their websites and applications that are both functional and aesthetically pleasing.
69 Views
