<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>伸缩式导航菜单</title>
<style type="text/css">
dl {
width: 158px;
margin:0px;
}
dt {
font-size: 14px;
padding: 0px;
margin: 0px;
width:146px; /*设置宽度*/
height:19px; /*设置高度*/
background-image:url(images/title_show.gif); /*设置背景图片*/
padding:6px 0px 0px 12px;
color:#215dc6;
font-size:12px;
cursor:hand;
}
dd{
color: #000;
font-size: 12px;
margin:0px;
}
a {
text-decoration: none; /*不显示下划线*/
}
a:hover {
color: #FF6600;
}
#top{
width:158px; /*设置宽度*/
height:30px; /*设置高度*/
background-image:url(images/top.gif); /*设置背景图片*/
}
#bottom{
width:158px; /*设置宽度*/
height:31px; /*设置高度*/
background-image:url(images/bottom.gif); /*设置背景图片*/
}
.title{
background-image:url(images/title_quit.gif); /*设置背景图片*/
}
.item{
width:146px; /*设置宽度*/
height:15px; /*设置高度*/
background-image:url(images/item_bg.gif); /*设置背景图片*/
padding:6px 0px 0px 12px;
color:#215dc6;
font-size:12px;
cursor:hand;
background-position:center;
background-repeat:no-repeat;
}
</style>
<script type="text/javascript" src="jquery-3.2.1.js"></script>
<script type="text/javascript">
$(function(){
$("dl dd").hide();
$("dt").click(function(){
if ($(this).attr("state")=="show") {
$(this).nextUntil("dt").hide(500);
$(this).attr("state","hide");
}
else{
$(this).nextUntil("dt").show(500);
$(this).attr("state","show");
}
});
});
</script>
</head>
<body>
<div id="top"></div>
<dl>
<dt>用户管理</dt>
<dd>
<div class="item">添加用户</div>
<div class="item">删除用息</div>
</dd>
<dt>商品管理</dt>
<dd>
<div class="item">添加商品</div>
<div class="item">修改商品</div>
<div class="item">删除商品</div>
</dd>
<dt>订单管理</dt>
<dd>
<div class="item">订单查询</div>
<div class="item">删除订单</div>
</dd>
<dt class="title"><a href="#">退出系统</a></dt>
</dl>
<div id="bottom"></div>
</body>
</html>
