Explore 100's Of Free Video Tutorials

Keep Learning, Keep Coding & Keep Sharing

Creating Menu Widget


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">
<meta charset="utf-8">
<title> Menu Demo</title>

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">
<a href="#">Home</a>
<a href="#">Skills</a>
<a href="#">C</a>
<a href="#">C++</a>
<a href="#">About</a>

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 a").css({"display":"block","textAlign":"center","textDecoration":"none"});

Interview Questions: