菜单栏展开

最新推荐文章于 2021-11-28 21:15:00 发布

我真的不是C罗

最新推荐文章于 2021-11-28 21:15:00 发布

阅读量267

点赞数

分类专栏：自学文章标签： js展开菜单栏

本文链接：https://blog.csdn.net/qq_25077777/article/details/51137895

版权

自学专栏收录该内容

25 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<style type="text/css">
     body{ margin: 30px 150px;font-family: Arial;font-size: 20px;}
     *{margin: 0;padding: 0;list-style-type: none;}
     #nav{width: 145px;background: #ccc;border: 2px solid #ccc;}
     #nav li{width: 145px;line-height: 24px;border-top: 1px solid #ccc; border-bottom: 1px solid #708195; position: relative;}
     .navlink{text-decoration: none;color: #ffffff;width: 115;height: 24px;padding-left: 20px; display: block;}
     .menu {
	width:145px;
	display: none;
}
.menu li {
	width:145px;
	height: 22px;
	border-bottom: 1px solid #708195;
	background: blue;
	position: relative;
}
.menulink {padding-left:50px;color:#6b7f97;text-decoration: none;}
.menulink:hover {
	text-decoration: underline;
}
	</style>
	<script type="text/javascript">
	function le(n){
     var nav=document.getElementById("m"+n);
     if (nav.style.display!="block") {
     	for (var i = 0; i <5; i++) {
     		document.getElementById("m"+i).style.display="none";
     	}
     	nav.style.display="block";
     }else{
     	nav.style.display="none";
     }

}
		</script>
</head>

<body>
<ul id="nav">
	<li><a href="#" class="navlink" οnclick="le(0)">首页</a></li>
	<ul id="m0" class="menu">
		<li><a href="#" class="menulink">1</a></li>
		<li><a href="#" class="menulink">2</a></li>
		<li><a href="#" class="menulink">3</a></li>
		<li><a href="#" class="menulink">4</a></li>
	</ul>
	<li><a href="#" class="navlink" οnclick="le(1)">关于</a></li>
	<ul id="m1" class="menu">
		<li><a href="#" class="menulink">1</a></li>
		<li><a href="#" class="menulink">2</a></li>
		<li><a href="#" class="menulink">3</a></li>
		<li><a href="#" class="menulink">4</a></li>
	</ul>
	<li><a href="#" class="navlink" οnclick="le(2)">专业的</a></li>
	<ul id="m2" class="menu">
		<li><a href="#" class="menulink">a</a></li>
		<li><a href="#" class="menulink">b</a></li>
		<li><a href="#" class="menulink">c</a></li>
		<li><a href="#" class="menulink">d</a></li>
	</ul>
	<li><a href="#" class="navlink" οnclick="le(3)">特色</a></li>
	<ul id="m3" class="menu">
		<li><a href="#" class="menulink">110</a></li>
		<li><a href="#" class="menulink">120</a></li>
		<li><a href="#" class="menulink">119</a></li>
		<li><a href="#" class="menulink">911</a></li>
	</ul>
	<li><a href="#" class="navlink" οnclick="le(4)">特色</a></li>
	<ul id="m4" class="menu">
		<li><a href="#" class="menulink">110</a></li>
		<li><a href="#" class="menulink">120</a></li>
		<li><a href="#" class="menulink">119</a></li>
		<li><a href="#" class="menulink">911</a></li>
	</ul>
	<li><a href="#" class="navlink" οnclick="le(5)">特色</a></li>
	<ul id="m5" class="menu">
		<li><a href="#" class="menulink">110</a></li>
		<li><a href="#" class="menulink">120</a></li>
		<li><a href="#" class="menulink">119</a></li>
		<li><a href="#" class="menulink">911</a></li>
	</ul>
</ul>
</body>
</html>

我真的不是C罗

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
菜单栏展开

body{ margin: 30px 150px;font-family: Arial;font-size: 20px;} *{margin: 0;padding: 0;list-style-type: none;} #nav{width: 145px;background: #ccc;border: 2px solid #ccc;} #nav li{width: 1
复制链接

扫一扫