|   字数统计: 1,297(字)

网页常用特效-导航类

发表于 | 分类于 | 阅读次数

网页常用特效-导航类

简单头部导航

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>各种下拉菜单 | 镜心书社</title>
	<style>
		*{margin: 0;padding:0;}
		#nav{background-color:#eee;width: 800px;height: 40px;margin:  0 auto;}
		ul{list-style: none;}
		ul li{float: left;padding: 0 20px;line-height: 40px;text-align: center;}
		ul li a{text-decoration: none;color:#000;}
		ul li:hover{background-color:#666; }
		ul li:hover a{color: #fff;}
	</style>
</head>
<body>
	<nav id="nav">
		<ul>
			<li><a href="#" title="">首页</a></li>
			<li><a href="#" title="">书架</a></li>
			<li><a href="#" title="">前端</a>
				<!-- <ul>
					<li>Javascript</li>
					<li>jQuery</li>
					<li>HTML5</li>
				</ul> -->
			</li>
			<li><a href="#" title="">后端</a></li>
			<li><a href="#" title="">移动</a></li>
			<li><a href="#" title="">数据库</a></li>
			<li><a href="#" title="">云计算</a></li>
			<li><a href="#" title="">运维&测试</a></li>
		</ul>
	</nav>
</body>
</html>

这里有个小主意点：

1
2
3
4
5
6
ul li:hover{
	background-color:#666; 
}
ul li:hover a{
	color: #fff;
}

下拉菜单

这种在li上面实现hover胜在简单，但是有一个问题，如果我要给其中一个选项加上下拉菜单，比如：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<body>
	<nav id="nav">
		<ul>
			<li><a href="#" title="">首页</a></li>
			<li><a href="#" title="">书架</a></li>
			<li><a href="#" title="">前端</a>
				<!-- 下拉菜单	-->
				<ul>
					<li>Javascript</li>
					<li>jQuery</li>
					<li>HTML5</li>
				</ul>
			</li>
			<li><a href="#" title="">后端</a></li>
			<li><a href="#" title="">移动</a></li>
			<li><a href="#" title="">数据库</a></li>
			<li><a href="#" title="">云计算</a></li>
			<li><a href="#" title="">运维&测试</a></li>
		</ul>
	</nav>

效果会成这样

让下拉菜单纵向显示

1
ul li ul li{float: none;background: #eee;margin-top:2px; }

效果

所以，我们之前不该在li上添加hover 而应该在li 下面的a添加 ，改成这样：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>各种下拉菜单 | 镜心书社</title>
	<style>
		*{margin: 0;padding:0;}
		#nav{background-color: #eee;width: 800px;height: 40px;margin:  0 auto;}
		ul{ list-style: none;}
		ul li{float: left;line-height: 40px;text-align: center;position: relative;}
		ul li a{text-decoration: none;color:#000;display: block;padding: 0 20px;height: 40px;}
		ul li a:hover{color: #fff;background-color:#666; }
		
		ul li ul li{float: none;background: #eee;margin-top:2px; }
		ul li ul{position: absolute;left: 0px;top:40px;display: none;}
		ul li ul a{width: 80px;} 
		ul li ul li a:hover{background-color:blue;
		}
		ul li:hover ul {display: block}
	</style>
</head>
<body>
	<nav id="nav">
		<ul>
			<li><a href="#" title="">首页</a></li>
			<li><a href="#" title="">书架</a></li>
			<li><a href="#" title="">前端</a>
	<!-- 下拉菜单			 -->
				<ul>
					<li><a href="#">Javascript</a></li>
					<li><a href="#">jQuery</a></li>
					<li><a href="#">HTML5</a></li>
				</ul>
			</li>
			<li><a href="#" title="">后端</a>
				<ul>
					<li><a href="#">PHP</a></li>
					<li><a href="#">Java</a></li>
					<li><a href="#">Python</a></li>
				</ul>				
			</li>
			<li><a href="#" title="">移动</a>
				<ul>
					<li><a href="#">Android</a></li>
					<li><a href="#">IOS</a></li>
					<li><a href="#">Unity 3D</a></li>
				</ul>
			</li>				
			<li><a href="#" title="">数据库</a></li>
			<li><a href="#" title="">云计算&大数据</a></li>
			<li><a href="#" title="">运维&测试</a></li>
			<li><a href="#" title="">UI设计</a></li>
			
		</ul>
	</nav>
</body>
</html>

javascript实现

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>各种下拉菜单 | 镜心书社</title>
	<style>
		*{margin: 0;padding:0;}
		#nav{background-color: #eee;width: 800px;height: 40px;margin:  0 auto;}
		ul{ list-style: none;}
		ul li{float: left;line-height: 40px;text-align: center;position: relative;}
		ul li a{text-decoration: none;color:#000;display: block;padding: 0 20px;height: 40px;}
		ul li a:hover{color: #fff;background-color:#666; }
		
		ul li ul li{float: none;background: #eee;margin-top:2px; }
		ul li ul{position: absolute;left: 0px;top:40px;display: none;}
		ul li ul a{width: 80px;} 
		ul li ul li a:hover{background-color:blue;
		}
	
	</style>
</head>
<body>
	<nav id="nav">
		<ul>
			<li><a href="#" title="">首页</a></li>
			<li><a href="#" title="">书架</a></li>
			<li onmouseover="showsubmenu(this)" onmouseout="hidesubmenu(this)"><a href="#" title="">前端</a>
	<!-- 下拉菜单			 -->
				<ul>
					<li><a href="#">Javascript</a></li>
					<li><a href="#">jQuery</a></li>
					<li><a href="#">HTML5</a></li>
				</ul>
			</li>
			<li><a href="#" title="">后端</a>
				<ul>
					<li><a href="#">PHP</a></li>
					<li><a href="#">Java</a></li>
					<li><a href="#">Python</a></li>
				</ul>				
			</li>
			<li><a href="#" title="">移动</a>
				<ul>
					<li><a href="#">Android</a></li>
					<li><a href="#">IOS</a></li>
					<li><a href="#">Unity 3D</a></li>
				</ul>
			</li>				
			<li><a href="#" title="">数据库</a></li>
			<li><a href="#" title="">云计算&大数据</a></li>
			<li><a href="#" title="">运维&测试</a></li>
			<li><a href="#" title="">UI设计</a></li>
			
		</ul>
	</nav>
	<script type="text/javascript">
		function showsubmenu(li){
			var submenu=li.getElementsByTagName("ul")[0];
			submenu.style.display="block";
		}
		function hidesubmenu(li){
			var submenu = li.getElementsByTagName("ul")[0];
			submenu.style.display="none";
		}
	</script>
</body>
</html>

jQuery实现

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>各种下拉菜单 | 镜心书社</title>
	<style>
		*{margin: 0;padding:0;}
		#nav{background-color: #eee;width: 800px;height: 40px;margin:  0 auto;}
		ul{ list-style: none;}
		ul li{float: left;line-height: 40px;text-align: center;position: relative;}
		ul li a{text-decoration: none;color:#000;display: block;padding: 0 20px;height: 40px;}
		ul li a:hover{color: #fff;background-color:#666; }
		
		ul li ul li{float: none;background: #eee;margin-top:2px; }
		ul li ul{position: absolute;left: 0px;top:40px;display: none}
		ul li ul a{width: 80px;} 
		ul li ul li a:hover{background-color:blue;
		}
	   
	</style>
<body>
	<nav id="nav">
		<ul>
			<li><a href="#" title="">首页</a></li>
			<li><a href="#" title="">书架</a></li>
			<li class="navmenu"><a href="#" title="">前端</a>
	<!-- 下拉菜单			 -->
				<ul>
					<li><a href="#">Javascript</a></li>
					<li><a href="#">jQuery</a></li>
					<li><a href="#">HTML5</a></li>
				</ul>
			</li>
			<li class="navmenu"><a href="#" title="">后端</a>
				<ul>
					<li><a href="#">PHP</a></li>
					<li><a href="#">Java</a></li>
					<li><a href="#">Python</a></li>
				</ul>				
			</li>
			<li class="navmenu"><a href="#" title="">移动</a>
				<ul>
					<li><a href="#">Android</a></li>
					<li><a href="#">IOS</a></li>
					<li><a href="#">Unity 3D</a></li>
				</ul>
			</li>				
			<li><a href="#" title="">数据库</a></li>
			<li><a href="#" title="">云计算&大数据</a></li>
			<li><a href="#" title="">运维&测试</a></li>
			<li><a href="#" title="">UI设计</a></li>
			
		</ul>
	</nav>
	
	<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
	<script type="text/javascript">
		
		$(function(){
			$(".navmenu").mouseover(function(){
				$(this).children("ul").show();
			})
			$(".navmenu").mouseout(function(){
				$(this).children("ul").hide();
			})
		})
	</script>
</body>
</html>
AlexZ33 wechat
扫码订阅公众号
如果文章对您有用请随意打赏，谢谢支持！