<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script src="Scripts/jquery.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {</script>
slides the element with class "menu_body" when
paragraph with class "menu_head" is clicked
$("#firstpane p.menu_head").click(function()
{ $(this).css({backgroundImage:"url(down.png)"}).next("div.menu_body").slideToggle(300).siblings("div.menu_body").slideUp("slow");
$(this).siblings().css({backgroundImage:"url(left.png)"});
}); //slides the element
<style type="text/css">
body
{
margin: 10px auto;
font: 75%/120% Verdana,Arial, Helvetica, sans-serif;
}
.menu_list
{
width: 150px;
}
.menu_head
{
padding: 5px 10px;
cursor: pointer;
position: relative;
margin: 1px;
font-weight: bold;
background: #eef4d3 url(left.png) center right no-repeat;
}
.menu_body
{
display: none;
}
.menu_body a
{
display: block;
color: #006699;
background-color: #EFEFEF;
padding-left: 10px;
font-weight: bold;
text-decoration: none;
}
.menu_body a:hover
{
color: #000000;
text-decoration: underline;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div style="float: left">
<!--This is the first division of left-->
<p>
<strong> Works on clicking </strong>
</p>
<div id="firstpane" class="menu_list">
<!--Code for menu starts here-->
<p class="menu_head">
Header-1</p>
<div class="menu_body">
<a href="#">Link-1</a> <a href="#">Link-2</a> <a href="#">Link-3</a>
</div>
<p class="menu_head">
Header-2</p>
<div class="menu_body">
<a href="#">Link-1</a> <a href="#">Link-2</a> <a href="#">Link-3</a>
</div>
<p class="menu_head">
Header-3</p>
<div class="menu_body">
<a href="#">Link-1</a> <a href="#">Link-2</a> <a href="#">Link-3</a>
</div>
</div>
<!--Code for menu ends here-->
</div>
</div>
</form>
</body>
</html>
0 comments:
Post a Comment