用css和js分别实现三级导航菜单

导航菜单hover事件用css实现相对容易，只需要将透明度更改即可，如果想要菜单有一个渐变的效果，然而可惜的是transition并不支持display，所以用opacity实现效果完全相同。

下面是用css实现的完整代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>三级导航菜单</title>
	</head>
	<style>
		*{
	margin: 0;
	padding: 0;
}
body{
	font-size: 16px;
	background-color:#EDEDED ;
	font-style: inherit;
	color:#757576 ;
}
.main{
	width: 1050px;
	margin: 0 auto;
}
.fl{
	float: left;
}
.fr{
	float: right;
}
a{
	text-decoration: none;
	outline: none;
	color:#757576 ;
}
ul,ol{
	list-style: none;
}
.clear{ 
	clear: both;
}
.clearfix{
	*zoom:1;
}
li{
	float: left;
	display: inline-block;
	width: 120px;
	height: 40px;
	text-align: center;
	line-height: 40px;
}
li a:hover{
	color: red;
}
#frist {
	opacity: 0;
}
#frist li{
	float: none;
	position: relative;
}
 li a:hover{
	color: red;
	transition: all 0.5s;
}
:hover{
	transition: all 2s; 
}
#second {
	opacity: 0;
	margin: -40px 0 0 80px;
	padding: 0px;
	position: absolute;
}
#nav_one:hover #frist{
	opacity:1;
	transition: all 2s;
}
#nav_two:hover #second{
	opacity:1;
	transition: all 2s;
}
	</style>
	
	<body>
		<div class="nav main">
			<ul id="nav">
				<li id="nav_one"><a href="#">一级</a>
					<ul id="frist">
						<li id="nav_two" class="nav_two">
							<a href="#" >二级</a>
							<ul id="second">
								<li><a href="#">三级</a></li>
								<li><a href="#">三级</a></li>
								<li><a href="#">三级</a></li>
							</ul>
						</li>
						<li class="nav_two"><a href="#">二级</a></li>
						<li class="nav_two"><a href="#">二级</a></li>
					</ul>
				</li>	
				<li><a href="#">一级</a></li>
				<li><a href="#">一级</a></li>
				<li><a href="#">一级</a></li>
				<li><a href="#">一级</a></li>
			</ul>
	</div>		
	</body>
</html>

js实现的相对麻烦一点，但也可以，代替了css中hover效果。

<!--<script>
	window.onload = function(){
		var one = document.getElementById("nav_one");
		var frist = document.getElementById("frist");
		var second = document.getElementById("second");
			one.onmouseover = function(){
				frist.style.opacity = "1";
				frist.style.transition = "all 2s";
				frist.style.WebkitTransition = "all 2s";
			}
			one.onmouseout = function(){
				frist.style.opacity = "0";
				frist.style.transition = "all 0.5s";
				frist.style.WebkitTransition = "all 0.5s";
			}
		var two = document.getElementById("nav_two");
			two.onmouseover = function(){
				second.style.opacity = "1";
				second.style.transition = "all 2s";
				second.style.WebkitTransition = "all 2s";
			}
			two.onmouseout = function(){
				second.style.opacity = "0";
				second.style.transition = "all 0.5s";
				second.style.WebkitTransition = "all 0.5s";
			}
		}
	</script>-->

用css和js分别实现三级导航菜单

猜你喜欢