Explore 100's Of Free Video Tutorials

Keep Learning, Keep Coding & Keep Sharing

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: