Creating Menu Widget
Notes:
jQuery UI - Creating Menu Widget :
Menu Widget:
is used to create theme able navigation bars or menus
Creating Menu Widget:
1. Create a new HTML document with basic HTML document structure code
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title> Menu Demo</title>
</head>
<body>
</body>
</html>
2. Link the necessary jQueryUI libray files to the HTML document
<link href="jquery-ui/jquery-ui.min.css" rel="stylesheet" type="text/css"/>
<script src="jquery-ui/external/jquery/jquery.js" type="text/javascript"></script>
<script src="jquery-ui/jquery-ui.min.js" type="text/javascript"></script>
3. Code the structure of the widget (i.e. HTML or markup):
To create a Menu widget; most of the time unordered lists are used. So we use unordered lists to create Menu widget.
Note: List item’s content must be wrapped within a block level element. But you can observe that, we are wrapping the list item’s content in anchor tag which is an inline level tag; we must convert it to block level tag, that we do using jQuery.
<ul id="menu">
<li>
<a href="#">Home</a>
</li>
<li>
<a href="#">Skills</a>
<ul>
<li>
<a href="#">C</a>
</li>
<li>
<a href="#">C++</a>
</li>
</ul>
</li>
<li>
<a href="#">About</a>
</li>
</ul>
4. Select the element using jQuery and call the respective jQuery UI function on it
Select the element using jQuery selector, call menu jQuery UI function on it
<script type="text/javascript">
$("#menu").menu();
$("#menu a").css({"display":"block","textAlign":"center","textDecoration":"none"});
$("#menu").css({"width":"25%"});
</script>
Interview Questions:
