<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm3.aspx.cs" Inherits="AccordionMenu.WebForm3" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<style>
.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>
<script type="text/javascript" language="javascript" src="Scripts/jquery-1.7.1.min.js"></script>
</head>
<body>
<form id="form1" runat="server">
<div>
<div id="firstpane" class="menu_list">
<p class="menu_head">Header-1</p>
<div class="menu_body">
<a href="#">Link-1</a>
<a href="#">Link-2</a>
</div>
<p class="menu_head">Header-2</p>
<div class="menu_body">
<a href="#">Link-1</a>
<a href="#">Link-2</a>
</div>
<p class="menu_head">Header-3</p>
<div class="menu_body">
<a href="#">Link-1</a>
<a href="#">Link-2</a>
</div>
</div>
</div>
<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 with class "menu_body" when mouse is over the paragraph
// $("#secondpane p.menu_head").mouseover(function () {
// $(this).css({ backgroundImage: "url(down.png)" }).next("div.menu_body").slideDown(500).siblings("div.menu_body").slideUp("slow");
// $(this).siblings().css({ backgroundImage: "url(left.png)" });
// });
</script>
</form>
</body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<style>
.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>
<script type="text/javascript" language="javascript" src="Scripts/jquery-1.7.1.min.js"></script>
</head>
<body>
<form id="form1" runat="server">
<div>
<div id="firstpane" class="menu_list">
<p class="menu_head">Header-1</p>
<div class="menu_body">
<a href="#">Link-1</a>
<a href="#">Link-2</a>
</div>
<p class="menu_head">Header-2</p>
<div class="menu_body">
<a href="#">Link-1</a>
<a href="#">Link-2</a>
</div>
<p class="menu_head">Header-3</p>
<div class="menu_body">
<a href="#">Link-1</a>
<a href="#">Link-2</a>
</div>
</div>
</div>
<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 with class "menu_body" when mouse is over the paragraph
// $("#secondpane p.menu_head").mouseover(function () {
// $(this).css({ backgroundImage: "url(down.png)" }).next("div.menu_body").slideDown(500).siblings("div.menu_body").slideUp("slow");
// $(this).siblings().css({ backgroundImage: "url(left.png)" });
// });
</script>
</form>
</body>
</html>
No comments:
Post a Comment