Objectives and outcomes

In this tutorial we are going to learn about jqueryUI menu widget and also about the constraint that can be used with the same. Menu widget in jqueryUI is used to create interactive menu like the ones which are used by e-commerce websites. Example for the same is shown below:





HTML code:

<html>
<head>
<meta charset="utf-8">
<title>jQuery UI Menu</title>
<link href="jquery-ui.min.css" rel="stylesheet">
<script src="jquery.min.js"></script>
<script src="jquery-ui.min.js"></script>
</head>
<body>
<ul id="menu">
<li><a href="#">HTML</a></li>
<li><a href="#">CSS</a></li>
<li><a href="#">JAVA</a>
<ul>
<li><a href="#">Java awk</a></li>
<li><a href="#">Android</a></li>
<li><a href="#">JSP</a></li>
</ul>
</li>
<li><a href="#">JSF</a></li>
<li><a href="#">XML</a></li>
</ul>
</body>
</html>


CSS stylesheet

<style>
.ui-menu 
{
width: 150px;
}
</style>


Javascript

<script>
$(function() {
$( "#menu" ).menu();
});
</script>


Menu widget is created by using menu function defined in jqueryUI. ui-menu is the class defined in jquerui.css file which we can customize according to our needs. Now we are going to use menu widget with constraints like icon and position. Example for the same is shown below:





Html and CSS remains same as the above



Javascript

<script>
$(function() {
$( "#menu1" ).menu({
icons: { submenu: "ui-icon-circle-triangle-e"},
position: { my: "right top", at: "right-10 top+5" }
});
});
</script>


In the first example the list element java has a simple arrow and also its submenu appears right in front of it because of default nature of menu function where as in second example we have changed the icon for submenu with arrow inside the circle. we have also changed the position of submenu by using position constraint with my and at attributes which defines the position of an object with respect to window.