<!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>
<title>抽屉菜单</title>
<style type="text/css">
.MenuPanel
{
padding-bottom:20px;
}
.MenuTitle
{
width:150px;
height:30px;
font-size:20px;
padding-left:10px;
padding-top:5px;
background:url(image/index_x.png) repeat-x 0px -673px;
border:#ffbc66 1px solid;
}
.MenuContent
{
width:108px;
font-size:16px;
padding:20px 10px 20px 40px;
border:#ffbc66 1px solid;
}
</style>
<script src="js/jquery-1.6.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".MenuPanel").each(function(){
$(this).children(".MenuContent").hide();
});
$(".MenuTitle").each(function(){
$(this).click(function(){
if($(this).parents(".MenuPanel").children(".MenuContent").css("display") != "none"){
$(this).parents(".MenuPanel").children(".MenuContent").hide("slow");
}else{
$(".MenuPanel").each(function(){
$(this).children(".MenuContent").hide();
});
$(this).parents(".MenuPanel").children(".MenuContent").show("slow");
}
});
});
});
</script>
</head>
<body>
<form id="form1">
<div>
<div class="MenuPanel">
<div class="MenuTitle">第一菜单</div>
<div class="MenuContent">
<a href="http://www.360buy.com?sid=bdstjk&t=2" target="_blank">子菜单</a><br />
<a href="http://www.360buy.com?sid=bdstjk&t=2" target="_blank">子菜单</a><br />
<a href="http://www.360buy.com?sid=bdstjk&t=2" target="_blank">子菜单</a><br />
<a href="http://www.360buy.com?sid=bdstjk&t=2" target="_blank">子菜单</a><br />
<a href="http://www.360buy.com?sid=bdstjk&t=2" target="_blank">子菜单</a>
</div>
</div>
<div class="MenuPanel">
<div class="MenuTitle">第二菜单</div>
<div class="MenuContent">
<a href="http://www.360buy.com?sid=bdstjk&t=2" target="_blank">子菜单</a><br />
<a href="http://www.360buy.com?sid=bdstjk&t=2" target="_blank">子菜单</a><br />
<a href="http://www.360buy.com?sid=bdstjk&t=2" target="_blank">子菜单</a><br />
<a href="http://www.360buy.com?sid=bdstjk&t=2" target="_blank">子菜单</a><br />
<a href="http://www.360buy.com?sid=bdstjk&t=2" target="_blank">子菜单</a>
</div>
</div>
<div class="MenuPanel">
<div class="MenuTitle">第三菜单</div>
<div class="MenuContent">
<a href="http://www.360buy.com?sid=bdstjk&t=2" target="_blank">子菜单</a><br />
<a href="http://www.360buy.com?sid=bdstjk&t=2" target="_blank">子菜单</a><br />
<a href="http://www.360buy.com?sid=bdstjk&t=2" target="_blank">子菜单</a><br />
<a href="http://www.360buy.com?sid=bdstjk&t=2" target="_blank">子菜单</a><br />
<a href="http://www.360buy.com?sid=bdstjk&t=2" target="_blank">子菜单</a>
</div>
</div>
<div class="MenuPanel">
<div class="MenuTitle">第四菜单</div>
<div class="MenuContent">
<a href="http://www.360buy.com?sid=bdstjk&t=2" target="_blank">子菜单</a><br />
<a href="http://www.360buy.com?sid=bdstjk&t=2" target="_blank">子菜单</a><br />
<a href="http://www.360buy.com?sid=bdstjk&t=2" target="_blank">子菜单</a><br />
<a href="http://www.360buy.com?sid=bdstjk&t=2" target="_blank">子菜单</a><br />
<a href="http://www.360buy.com?sid=bdstjk&t=2" target="_blank">子菜单</a>
</div>
</div>
</div>
</form>
</body>
</html>
- 1
- 2
- 3
- 4
- 5
- 6
前往页