Jquery UI provides a widget (method) to design navbar in Jquery UI. The method is menu().
Documentation for menu in Jquery UI
- Use UL or OL tag and give id value to select and apply
menu()method/widget.<div class="menu"></div> - List menu items in the LI tag.
<div class="menu"><li>Home</li></div> - To make menu items clickable, its text should be surrounded by an anchor tag. And anchor tag should be in a DIV.
<div class="menu">
<li><div>
<a href="#">Home</a>
</div></li>
</div> - Finally, Use the nav() method in the UL element by selecting it in the Jquery.
- Use some CSS for menus and to remove anchor text default design. See the example below.
Example-
<!DOCTYPE html>
<html>
<head>
<title>Jquery UI Menu</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css" />
<style>
#ui-menu{width:300px;}
#ui-menu a{text-decoration:none;font-size:25px;}
</style>
</head>
<body>
<ul id="ui-menu">
<li><div><a href="#">Home</a></div></li>
<li><div><a href="#">HTML</a></div></li>
<li><div><a href="#">CSS</a></div></li>
<li><div><a href="#">JAVASCRIPT</a></div></li>
<li><div><a href="#">BOOTSTRAP</a></div></li>
</ul>
<script>
$(document).ready(function(){
$("#ui-menu").menu();
});
</script>
</body>
</html>
Dropdown menu
To make a menu dropdown, just start another UL tag before the ending LI tag. and list dropdown menus the same way. See this example.
<!DOCTYPE html>
<html>
<head>
<title>Jquery UI Menu</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css" />
<style>
#ui-menu{width:300px;}
#menu-dropdown{width:200px;text-align:center;}
#ui-menu a{text-decoration:none;font-size:25px;}
</style>
</head>
<body>
<ul id="ui-menu">
<li><div><a href="#">Home</a></div></li>
<li><div><a href="#">HTML</a></div>
<ul id="menu-dropdown">
<li><div><a href="#">HTML4</a></div></li>
<li><div><a href="#">HTML5</a></div></li>
</ul>
</li>
<li><div><a href="#">CSS</a></div></li>
<li><div><a href="#">JAVASCRIPT</a></div></li>
<li><div><a href="#">BOOTSTRAP</a></div></li>
</ul>
<script>
$(document).ready(function(){
$("#ui-menu").menu();
});
</script>
</body>
</html>
| Options | Value |
|---|---|
| icons | Jquery UI icons |
| disabled | true and false |
| position | Example:- my: "left top", at: "right-30 top+10" |
icons Option
When a menu has a drop-down menu. Then you can insert an icon to indicate your users about it. For this, use the icons option. You can use Jquery UI icons in its value.
<!DOCTYPE html>
<html>
<head>
<title>Jquery UI Menu</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css" />
<style>
#ui-menu{width:300px;}
#menu-dropdown{width:200px;text-align:center;}
#ui-menu a{text-decoration:none;font-size:25px;}
</style>
</head>
<body>
<ul id="ui-menu">
<li><div><a href="#">Home</a></div></li>
<li><div><a href="#">HTML</a></div>
<ul id="menu-dropdown">
<li><div><a href="#">HTML4</a></div></li>
<li><div><a href="#">HTML5</a></div></li>
</ul>
</li>
<li><div><a href="#">CSS</a></div></li>
<li><div><a href="#">JAVASCRIPT</a></div></li>
<li><div><a href="#">BOOTSTRAP</a></div></li>
</ul>
<script>
$(document).ready(function(){
$("#ui-menu").menu({
icons:{submenu:"ui-icon-circle-arrow-e"}
});
});
</script>
</body>
</html>disabled Option
This option has two values - true and false (default). When you set its value to true then it will disable the menu.
<!DOCTYPE html>
<html>
<head>
<title>Jquery UI Menu</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css" />
<style>
#ui-menu{width:300px;}
#menu-dropdown{width:200px;text-align:center;}
#ui-menu a{text-decoration:none;font-size:25px;}
</style>
</head>
<body>
<ul id="ui-menu">
<li><div><a href="#">Home</a></div></li>
<li><div><a href="#">HTML</a></div>
<ul id="menu-dropdown">
<li><div><a href="#">HTML4</a></div></li>
<li><div><a href="#">HTML5</a></div></li>
</ul>
</li>
<li><div><a href="#">CSS</a></div></li>
<li><div><a href="#">JAVASCRIPT</a></div></li>
<li><div><a href="#">BOOTSTRAP</a></div></li>
</ul>
<script>
$(document).ready(function(){
$("#ui-menu").menu({
icons:{submenu:"ui-icon-circle-arrow-e"},
disabled:true,
});
});
</script>
</body>
</html>position Option
You can define drop-down menu position from the associated parent menu item.
<!DOCTYPE html>
<html>
<head>
<title>Jquery UI Menu</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css" />
<style>
#ui-menu{width:300px;}
#menu-dropdown{width:200px;text-align:center;}
#ui-menu a{text-decoration:none;font-size:25px;}
</style>
</head>
<body>
<ul id="ui-menu">
<li><div><a href="#">Home</a></div></li>
<li><div><a href="#">HTML</a></div>
<ul id="menu-dropdown">
<li><div><a href="#">HTML4</a></div></li>
<li><div><a href="#">HTML5</a></div></li>
</ul>
</li>
<li><div><a href="#">CSS</a></div></li>
<li><div><a href="#">JAVASCRIPT</a></div></li>
<li><div><a href="#">BOOTSTRAP</a></div></li>
</ul>
<script>
$(document).ready(function(){
$("#ui-menu").menu({
icons:{submenu:"ui-icon-circle-arrow-e"},
position: { my: "left top", at: "right-30 top+10" }
});
});
</script>
</body>
</html>Also, learn-
Publish A Comment