<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() {
//slides the element
//with class "menu_body" when mouse is over the paragraph
$("#secondpane p.menu_head").mouseover(function()
{ $(this).css({backgroundImage:"url(~\Images\down.png)"}
).next("div.menu_body").slideDown(500).siblings("div.menu_body").slideUp("slow");
$(this).siblings().css({backgroundImage:"url(~\Images\left.png)"
});
});
});
</script>
<style type="text/css">
body
{
margin: 10px auto;
font: 75%/120% Verdana,Arial, Helvetica, sans-serif;
}
.menu
{
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; margin-left: 20px;">
<!--This is the second division of right-->
<p>
<strong>Places</strong>
</p>
<div class="menu" id="secondpane">
<!--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>
</form>
</body>
</html>
0 comments:
Post a Comment