Introduction:
Description:
In previous article Ajax Accordion menu Example and some other articles create beautiful tooltip, Move Tooltip with mouse move using jQuery library. Now I will explain how to implement simple accordion menu using jQuery UI Library in asp.net.
In previous article Ajax Accordion menu Example and some other articles create beautiful tooltip, Move Tooltip with mouse move using jQuery library. Now I will explain how to implement simple accordion menu using jQuery UI Library in asp.net.
By using jQuery Plugin We can implement accordion menu for that we need to write the code like this
|
If you want to see complete example write the following code in your aspx page
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>jQuery UI Accordion Example</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.1/themes/base/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.8.2.js"></script>
<script src="http://code.jquery.com/ui/1.9.1/jquery-ui.js"></script>
<script type="text/javascript">
$(function () {
$("#accordion").accordion({
heightStyle: "fill"
});
});
</script>
<style type="text/css">
#accordion-resizer
{
width: 450px;
height: 220px;
font-size:10px;
font-family:Calibri;
}
</style>
</head>
<body>
<div id="accordion-resizer">
<div id="accordion">
<h3>Home</h3>
<div>
<p>Welcome to Aspdotnet-Suresh Welcome to Aspdotnet-Suresh Welcome to Aspdotnet-Suresh
Welcome to Aspdotnet-SureshWelcome to Aspdotnet-SureshWelcome to Aspdotnet-Suresh
Welcome to Aspdotnet-SureshWelcome to Aspdotnet-SureshWelcome to Aspdotnet-Suresh.
</p>
</div>
<h3>About</h3>
<div>
<p>Aspdotnet-Suresh offers Asp.net,C#.net,SQL Server,Web Services,WCF,WPF,MVC,
Crystal Reports,AJAX,XML,JavaScript,JQuery,Gridview articles,
samples and tutorials,code examples of asp.net.
</p>
</div>
<h3>Contact</h3>
<div>
<p>Welcome to Aspdotnet-Suresh Welcome to Aspdotnet-Suresh Welcome to Aspdotnet-Suresh
Welcome to Aspdotnet-SureshWelcome to Aspdotnet-SureshWelcome to Aspdotnet-Suresh
Welcome to Aspdotnet-SureshWelcome to Aspdotnet-SureshWelcome to Aspdotnet-Suresh.
</p>
<ul>
<li>List item one</li>
<li>List item two</li>
<li>List item three</li>
</ul> </div>
<h3>Advertise</h3>
<div>
<p>Welcome to Aspdotnet-Suresh Welcome to Aspdotnet-Suresh Welcome to Aspdotnet-Suresh
Welcome to Aspdotnet-SureshWelcome to Aspdotnet-SureshWelcome to Aspdotnet-Suresh
Welcome to Aspdotnet-SureshWelcome to Aspdotnet-SureshWelcome to Aspdotnet-Suresh.
</p>
<p>Welcome to Aspdotnet-Suresh Welcome to Aspdotnet-Suresh Welcome to Aspdotnet-Suresh
Welcome to Aspdotnet-SureshWelcome to Aspdotnet-SureshWelcome to Aspdotnet-Suresh
Welcome to Aspdotnet-SureshWelcome to Aspdotnet-SureshWelcome to Aspdotnet-Suresh.
</p>
</div>
</div>
</div>
</body>
</html>
|
Demo
|
No comments:
Post a Comment