纵向导航菜单，点击产生二级菜单

最新推荐文章于 2024-05-27 17:40:18 发布

程序猿进化之旅

最新推荐文章于 2024-05-27 17:40:18 发布

阅读量402

点赞数

分类专栏： web开发文章标签：导航 javascript html css

本文链接：https://blog.csdn.net/chenweihua556/article/details/45919359

版权

web开发专栏收录该内容

29 篇文章 0 订阅

订阅专栏

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>ERP信息管理系统</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}

.nav {
width: 150px;
margin-top:10px;
margin-left:20px;
}

#nav h3 {
cursor: pointer;
line-height: 20px;
height: 30px;
background-color: #5592CF;
color: #fff;
text-align: left;
font-size:17px;
}

#nav a {
display: block;
line-height: 24px;
color: #666666;
text-decoration: none;
font-size:10px;
}

#nav a:hover {
background-color: #eee;
color: #000;
}

#nav div {
display: none;
border: 1px solid #000;
border-top: none;

}
</style>
<script type="text/javascript">
function $(id) { return document.getElementById(id) }
window.onload = function () {
$("nav").onclick = function (e) {
var src = e ? e.target : event.srcElement;
if (src.tagName == "H3") {
var next = src.nextElementSibling || src.nextSibling;
next.style.display = (next.style.display == "block") ? "none" : "block";
}
}
}
</script>
</head>

<body>
<div style="height:100%; width:15%;background-color:white;float:left" >
<div id="nav">
<h3>流程管理</h3>
<div>

<a href="http://www.baidu.com" target="mainframe">未处理的任务管理</a>
<a href="#">已处理的任务管理</a>
<a href="#">综合任务查询</a>

</div>
<h3>选题管理</h3>
<div>
<a href="http://www.baidu.com" target="mainframe">新建选题</a>
</div>
<h3>选题查询</h3>
<div>

<a href="http://www.baidu.com" target="mainframe">选题信息查询</a>
<a href="#">重点选题查询</a>
<a href="#">已撤销选题查询</a>

</div>
<h3>合同管理</h3>
<div>

<a href="http://www.baidu.com" target="mainframe">出版合同归类</a>
<a href="#">出版合同查询</a>
</div>
</div>
</div>
<iframe style="height: 100%; width: 50%; background-color: #3385FF; float: left; " name="mainframe" id="mainframe"></iframe>
</body>
</html>