前端

下拉菜单

最近几天在看慕课网上的前端视频。主要是下拉菜单的制作。先把代码贴上去，以后慢慢总结(考试周伤不起啊~~(那你还去看前端…))

贴几个经典的吧：

1. 最普通的下拉菜单

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
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>nav</title>
	<style>
		* {margin: 0; padding: 0; }
		div {width: 960px; height: 40px; margin: 0 auto; background-color: #eee;}
		ul {list-style: none; }
		ul li {position: relative; float: left; line-height: 40px; text-align: center; }
		a {display: block; text-decoration: none; color: #000; padding: 0 10px; height: 40px; }
		a:hover {color: #fff; background-color: #000;}
		ul li ul li {float: none; background-color: #eee; margin-top: 2px;}
		ul li ul {position: absolute; left: 0; top: 40px; display: none;}
		ul li ul li a{ width:80px;}
		ul li ul li a:hover {background-color: #06F;}
		ul li:hover ul{display: block;}
	</style>
</head>
<body>
	<div>
		<ul>
			<li><a href="#">首页</a>
				<ul>
					<li><a href="#">JavaScript</a></li>
					<li><a href="#">jQuery</a></li>
				</ul>
			</li>
			<li><a href="#">课堂大厅</a>
				<ul>
					<li><a href="#">视频学习</a></li>
					<li><a href="#">案例学习</a></li>
				</ul>
			</li>
			<li><a href="#">学习中心</a></li>
			<li><a href="#">经典案例</a></li>
			<li><a href="#">关于我们</a></li>
		</ul>
	</div>
</body>
</html>

2. 下拉菜单的变种

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
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>nav</title>
	<style>
		* {margin: 0; padding: 0; }
		div {width: 960px; height: 40px; margin: 0 auto; background-color: #eee; border-bottom: 10px solid #E25; overflow: auto;}
		ul {list-style: none; }
		ul li {float: left; line-height: 40px; text-align: center; }
		a {display: block; text-decoration: none; color: #000; width: 120px;} /*这里加了Height会出错*/
		a:hover {color: #fff; }
		li a span {display: none;}
		li a:hover span{display: block; background-color: #E25; }
		li a:hover {margin-top: -40px;}
	</style>
</head>
<body>
	<div>
		<ul>
			<li><a href="#">首页<span>Home</span></a></li>
			<li><a href="#">课堂大厅<span>Course</span></a></li>
			<li><a href="#">学习中心<span>Center</span></a></li>
			<li><a href="#">经典案例<span>Case</span></a></li>
			<li><a href="#">关于我们<span>About</span></a></li>
		</ul>
	</div>
</body>
</html>

3. 三级菜单的JS实现（兼容IE6）

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
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		* {margin: 0; padding: 0; }
		#nav {width: 960px; height: 40px; margin: 0 auto; }
		ul {list-style: none; }
		ul li {float: left; line-height: 40px; text-align: center; }
		a {display: block; text-decoration: none; color: #000; width: 120px; background-color: #eee;}
		a:hover {color: #fff;background-color: #E25;}
		 /*二级菜单*/
		#nav li ul{display: none; position: relative;width: 80px;}
		/*三级菜单*/
		#nav li ul li ul {position: absolute; top: 0; left: 120px; width: 80px; }
	</style>
	<script>
		window.onload = function () {
			// var isIE = !!window.ActiveXObject;
			// var isIE6 = isIE && !window.XMLHttpRequest;
			// if (isIE6) {
				var Lis = document.getElementsByTagName('li');
				for (var i = 0; i < Lis.length; i++) {
					Lis[i].onmouseover = function () {
						var u = this.getElementsByTagName('ul')[0];
						if (u != undefined) {
							u.style.display = "block";
						};
					}
					Lis[i].onmouseout = function () {
						var u = this.getElementsByTagName('ul')[0];
						if (u != undefined) {
							u.style.display = "none";
						};
					}
				};
			// };
		}
	</script>
</head>
<body>
	<ul id="nav">
		<li><a href="">首页</a></li>
		<li><a href="">课程</a></li>
		<li><a href="">学习中心+</a>	
			<ul>
				<li><a href="">前端+</a>
					<ul>
						<li><a href="">JavaScript</a></li>
						<li><a href="">CSS</a></li>
						<li><a href="">jquery</a></li>
					</ul>
				</li>
				<li><a href="">手机</a>
					<ul>
						<li><a href="">IOS</a></li>
						<li><a href="">WP</a></li>
						<li><a href="">ANDROID</a></li>
					</ul></li>
				<li><a href="">后台</a></li>
			</ul>
		</li>
		<li><a href="">关于我们</a></li>
		<li><a href="">这是什么</a></li>
	</ul>
</body>
</html>

好吧我又给自己挖了好多坑了…让我想想怎样把代码的效果放在这篇文章中。。

分享到