js实现二级菜单

最新推荐文章于 2024-05-09 00:14:24 发布

小白小白从不日白

最新推荐文章于 2024-05-09 00:14:24 发布

阅读量914

点赞数 1

分类专栏： javascript案例文章标签： javascript

本文链接：https://blog.csdn.net/weixin_43285360/article/details/116053864

版权

javascript案例专栏收录该内容

81 篇文章 17 订阅

订阅专栏

这里主要利用了鼠标事件的onmouseover和onmouseout，如果有不熟悉的可以参考下：事件处理二

由于该案例比较简单，因此我们直接上代码吧。

<div class="menu-box">
	<ul>
		<li>
			<a href="#">首页</a>
		</li>
		<li onmouseover="show(this)" onmouseout="hiden(this)">
			<a href="#">课程大纲</a>
			<ul>
				<li>
					<a href="#">html</a>
				</li>
				<li>
					<a href="#">css</a>
				</li>
				<li>
					<a href="#">html5</a>
				</li>
				<li>
					<a href="#">css3</a>
				</li>
				<li>
					<a href="#">javascript</a>
				</li>
			</ul>
		</li>
		<li onmouseover="show(this)" onmouseout="hiden(this)">
			<a href="#">实操</a>
			<ul>
				<li>
					<a href="#">html实操</a>
				</li>
				<li>
					<a href="#">css实操</a>
				</li>
				<li>
					<a href="#">html5实操</a>
				</li>
				<li>
					<a href="#">css3实操</a>
				</li>
				<li>
					<a href="#">javascript实操</a>
				</li>
			</ul>
		</li>
		<li onmouseover="show(this)" onmouseout="hiden(this)">
			<a href="#">关于我们</a>
			<ul>
				<li>
					<a href="#">网站历史</a>
				</li>
				<li>
					<a href="#">客服</a>
				</li>
				<li>
					<a href="#">联系方式</a>
				</li>
			</ul>
		</li>
	</ul>
</div>
<script src="index.js"></script>

a {
	text-decoration: none;
	color: #000;
}

ul,li {
	list-style: none;
}

.menu-box {
	position: relative;
	width: 500px;
	margin: 50px auto;
	height: 40px;
	background-color: #0099cc;
}


.menu-box ul {
	padding: 0;
}


.menu-box>ul>li {
	width: 120px;
	height: 40px;
	float: left;
	line-height: 40px;
	text-align: center;
	margin-right: 6.67px;
}

.menu-box>ul>li:last-child {
	margin-right: 0;
}

.menu-box>ul>li:hover {
	background-color: #ccc;
}

.menu-box>ul>li:hover a {
	color: #fff;
}

.menu-box ul li>ul {
	display: none;
	background-color: skyblue;
}

/* .menu-box ul li:hover ul {
	display: block;
} */

.menu-box ul li>ul li:hover {
	/* background-color: #4a9fb6; */
		background-color: #3d6061;
}

.menu-box ul li>ul li:hover a {
	font-size: 16px;
}

function show(li){
      var second_menu = li.getElementsByTagName("ul")[0];
      second_menu.style.display = "block";
  }

function hiden(li){
      var second_menu = li.getElementsByTagName("ul")[0];
      second_menu.style.display = "none";
  }
//当然，实现的方式不止一种，也可以用dom0级事件和dom2级事件来实现
//但是相比dom0级事件和dom2级事件，在下认为用html事件更简单一些