In this article I will show you how you can create three
level menus with disable menu item using jQuery in
asp.net.
Some of my previous articles are as follows: jQuery
Dialog Box Open with Blind and Close With Explode Effect in Asp.Net, jQuery
Digital Clock For Asp.Net, MVC and HTML Applications, jQuery
Datepicker Calendar With Slide Down Effect In Asp.Net, jQuery
Code To Select Multiple Item By Pressing Ctrl Button In Asp.Net, jQuery
Animated Resizable Panel OR Div Control On Mouse Click In Asp.Net, jQuery
Accordion Menu With Sortable Effect in Asp.net.
So for this article first we will create a new asp.net article and add the below code library reference in the page header.
So for this article first we will create a new asp.net article and add the below code library reference in the page header.
<link rel="stylesheet"
href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
|
<script>
$(function () {
$("#ulMenu").menu();
});
</script>
<style>
.ui-menu {
width: 200px;
}
</style
|
The above code will responsible for displaying and making alignment
for menu item. Now please check the complete code for displaying the menu using
jQuery.
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Three Level Menus
With Disable Menu Item Using jQuery In Asp.Net</title>
<link rel="stylesheet"
href="http://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script>
$(function () {
$("#ulMenu").menu();
});
</script>
<style>
.ui-menu {
width: 200px;
}
</style>
</head>
<body>
<ul id="ulMenu">
<li class="ui-state-disabled">Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>
Item 4
<ul>
<li class="ui-state-disabled">Sub Item 1</li>
<li>Sub Item 2</li>
<li>Sub Item 3</li>
<li>Sub Item 4</li>
</ul>
</li>
<li>Item 5</li>
<li>
Item 6
<ul>
<li>
Sub Item 1
<ul>
<li>Sub Sub Item 1</li>
<li>Sub Sub Item 2</li>
<li>Sub Sub Item 3</li>
</ul>
</li>
<li>
Sub Item 2
<ul>
<li>Sub Sub Item 1</li>
<li>Sub Sub Item 2</li>
</ul>
</li>
</ul>
</li>
</ul>
</body>
</html>
|
Now we have done. Run the application to check he output.
About the Author
0 comments:
Please let me know your view