一直没写过东西,这几天写了一个简单的Jquery菜单,没有CSS,没有image,只有一个简单的效果。
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta content="text/html; charset=UTF8" http-equiv="content-type">
<title></title>
<script type="text/javascript" src="js/jquery-1.7.1.js"></script>
<style type="text/css">
div {
margin-left: 25px;
}
ul {
margin: 0px;
list-style:none;
}
ul li {
margin: 0px;
padding-right: 5px
}
ul li a{
text-decoration: none;
}
div {
width: 200px;
height: auto;
display: none;
}
h4{
padding-left:5px;
padding-right:auto;
line-height:auto;
margin:10px 0 0 5px;
font-size:17px;
width: auto;
text-align: left;
}
h4 a{
text-decoration: none;
color: #3D5B81;
}
</style>
<script type="text/javascript">
function show(ele) {
$(ele).next().slideToggle("slow");
}
</script>
</head>
<body>
<div style="margin-left: 25px;padding-left: 5px;display: block;" id="menu">
<h4 οnclick="show(this)" > <a href="javascript:void(0)">菜单选项 </a></h4>
<div>
<ul>
<li ><a href="#">菜单</a></li>
<li ><a href="#">菜单</a>
</li>
<li ><a href="#">菜单</a>
</li>
<li ><a href="#">菜单</a>
</li>
<li ><a href="#">菜单</a>
</li>
</ul>
</div>
<h4 οnclick="show(this)" > <a href="javascript:void(0)">查询选项 </a></h4>
<div>
<ul>
<li ><a href="#">菜单</a>
</li>
<li ><a href="#">菜单</a>
</li>
<li ><a href="#">菜单</a>
</li>
<li ><a href="#">菜单</a>
</li>
<li ><a href="#">菜单</a>
</li>
</ul>
</div>
<h4 οnclick="show(this)" > <a href="javascript:void(0)">游戏积分查询 </a></h4>
<div>
<ul>
<li ><a href="#">菜单</a></li>
<li ><a href="#">菜单</a></li>
</ul>
</div>
<h4 οnclick="show(this)" > <a href="javascript:void(0)">权限管理 </a></h4>
<div>
<ul>
<li ><a href="#">菜单</a></li>
<li ><a href="#">菜单</a></li>
</ul>
</div>
</div>
</body></html>