前端

下拉菜单(2)

你知道我这几天都在干嘛吗^_^
今天下午买的手柄到了！！！好开熏。

1. 带动画效果的下拉菜单

js版

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
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		.top-nav{font-size: 14px; font-weight: bold; list-style: none; }
		.top-nav li {float: left; margin-right: 1px; }
		.top-nav li a{line-height: 34px; text-decoration: none; background-color: #3f240e; color: #fff; display: block; width: 80px; text-align: center; }
		/*二级菜单*/
		.top-nav ul {list-style: none; display: none; padding: 0; position: absolute; height: 0; overflow: hidden;}
		.top-nav li a:hover { background-color: #e54; }
		.note {background-color: #e54; display: block;}
	</style>
	<script>
		window.onload = function () {
			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";
						ChangeH(u.id,1);
					};
				}
				Lis[i].onmouseleave = function () {
					var u = this.getElementsByTagName('ul')[0];
					if (u != undefined) {
						ChangeH(u.id,-1);
					};
					
				}
			};
		}
		function ChangeH (id,count) {
			var ulList = document.getElementById(id);
			var h = ulList.offsetHeight;
			h += count;
			if (count > 0) {
				if (h <= 34) {
					ulList.style.height = h + "px";
					setTimeout("ChangeH('" + id + "',1)",10);						
				} else {
					return ;
				}
			} else {
				if (h > 0) {
					ulList.style.height = h + "px";
					setTimeout("ChangeH('" + id + "',-1)",10);
				} else {
					ulList.style.display = "none";
					return ;				
				}
			}		
		}
		// function AddH (id) {
		// 	var ulList = document.getElementById(id);
		// 	var h = ulList.offsetHeight;
		// 	h += 1;
		// 	if (h<=42) {
		// 		ulList.style.height = h + "px";
		// 		setTimeout("AddH('" + id + "')",10);
		// 	} else {
		// 		return;
		// 	}
			
		// }
		// function SubH (id) {
		// 	var ulList = document.getElementById(id);
		// 	var h = ulList.offsetHeight;
		// 	h -= 1;
		// 	if (h > 0) {
		// 		ulList.style.height = h + "px";
		// 		setTimeout("SubH('" + id + "')",10);
		// 	} else {
		// 		ulList.style.display = "none";
		// 		return ;
		// 	}
		// }
	</script>
</head>
<body>
	<ul class="top-nav">
		<li><a href=""><span class="note">首页</span></a></li>
		<li><a href="">课程</a></li>
		<li><a href="">学习中心+</a>	
			<ul id="munUL">
				<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>

jquery版

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script type="text/javascript" src = "jquery-2.1.1.js"></script>
	<script>
		$(document).ready(function () {
			$('.top-nav li').mousemove(function() {
				$(this).find('ul').stop(true).slideDown('1000');
			});
			$('.top-nav li').stop(true,true).mouseleave(function() {
				$(this).find('ul').stop(true).slideUp('1000');
			});			
		
		});
	</script>

对不起我就是这么懒哈哈哈
从实际的效果来看，为了防止手贱一直去滑动那个菜单触发效果往动画栈里一直塞，需要添加一个.stop()函数来停止动画，当鼠标移走时清空动画栈。

高级一点的菜单

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
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
	.navlist
	{
		position: absolute;
		top: 10px;
	}
	a
	{
		text-decoration: none;
		color: #FFF;
	}
	.navlist a 
	{
		margin-left: 60px;
		color: #666;
	}
	.expand
	{
		height: 0px;
		background-color: #333d4d;
		overflow: hidden;
		position: relative;
		top: 30px;
		width: 100%;
	}
	.expdiv
	{
		height: 130px;
		width: 500%;
	}
	.expdiv-list
	{
		width: 20%;
		text-align: center;
		float: left;
		line-height: 110px;
		color: #FFF;
	}
	.expand .close-btn
	{
		width: 120px;
		height: 20px;
		background: url(images/broswer_home.png) no-repeat -13px -117px;
		position: absolute;
		left: 50%;
		bottom: -2px;
		margin-left: -60px;
		cursor: pointer;
	}
	</style>
	<script type="text/javascript" src = "jquery-2.1.1.js"></script>
	<script>
	$(function () {
		$('#menuList').on('click', 'a', function() {
			if ($(this).hasClass('btn-active')) {
				$('#expandZone #clostBtn').click();
				return false;
			};
			var curIndex = $(this).index(),mlValue = "-" + curIndex * 100 + "%";
			if ($("#expandZone").hasClass('active')) {
				$('#expandZone .expdiv').animate({marginLeft: mlValue});
			} else {
				$('#expandZone .expdiv').css({marginLeft: mlValue});
				$('#expandZone').animate({height: "130px"}).addClass('active');
			}
			$(this).addClass('btn-active').siblings().removeClass('btn-active');
			return false;
		});
		$("#expandZone #close-btn").on('click', function() {
			$("#expandZone").animate({height: "0px"}, function () {
				$(this).removeClass('active');
				$('#menuList .btn-active').removeClass('btn-active');
			});
			return false;		
		});
	})
	</script>
</head>
<body>
	<div id="menuList" class="navlist">
		<a href="">首页</a>
		<a href="">课程大厅</a>
		<a href="">学习中心</a>
		<a href="">这是什么</a>
		<a href="">关于我们</a>
	</div>
	<div id="expandZone" class="expand">
		<div class="expdiv">
			<div class="expdiv-list">
				<a href="">幕客网主页</a>
			</div>
			<div class="expdiv-list">
				<a href="">前段克成</a>
				<a href="">手机开发</a>
				<a href="">后台变成</a>
			</div>
			<div class="expdiv-list">
				<a href="">JavaScript</a>
				<a href="">CSS</a>
				<a href="">Jquery</a>
			</div>
			<div class="expdiv-list">
				个人信息：
			</div>
			<div class="expdiv-list">
				这是公司地址呀~！
			</div>
		</div>
		<div id="clostBtn" class="close-btn"></div>
	</div>
</body>
</html>

还有点小bug。让我慢慢改一下

响应式菜单

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
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		body 
		{
			margin: 0 auto;
		}
		ul
		{
			padding: 0;
			margin: 0;
		}
		a
		{
			text-decoration: none;
			color: #FFF;
			font-size: 14px;
			padding: 0 3px;
			display: block;
		}
		.menu li 
		{
			display: block;
			float: left;
			margin: 3px;
			background: Gray;
			width: 140px;
			text-align: center;
			color: #FFF;
			font-size: 9pt;
		}
		#logo
		{
			background: white;
			width: 230px;
		}
		#logo a 
		{
			color: Gray;
			font-size: 35pt;
			background: white;
		}
		#toplogo
		{
			display: none;
			margin: 0 auto;
			text-align: center;
		}
		#toplogo a
		{
			color: black;
			font-size: 35pt;
		}
		.rMenu
		{
			display: none;
		}
		@media only screen and (min-width: 585px) and (max-width: 823px){
				#logo
				{
					display: none;
				}
				#toplogo
				{
					display: block;
					width: 100%;
				}
				.menu
				{
					width: 585px;
				}
			}
		
		@media only screen and (max-width: 585px) {
			#logo
			{
				display: none;
			}
			#toplogo
			{
				display: block;
			}
			.munu 
			{
				width: 100%;
			}
			.menu li
			{
				width: 100%;
				
			}
			.rMenu
			{
				display: block;
				text-align: right;
			}
		}	
	</style>
</head>
<body>
	<ul class="menu">
		<div id="toplogo">
			<a href="">木渴望</a>
			<a href="" class="rMenu">
				<img src="icon.png" alt="">
			</a>
		</div>
		<li><a href="">课程大厅</a><br>IT课程在这里</li>
		<li><a href="">学习中心</a><br>好好学习天天向上</li>
		<li id="logo"><a href="">木刻万</a></li>
		<li><a href="">个人中心</a><br>个人中心 修改密码</li>
		<li><a href="">关于我们</a><br>单位地址 应聘信息</li>
	</ul>
</body>
</html>

虽然很丑，真的很丑。但是让我入门了响应式设计。媒体查询Js什么的一起上。

CSS3菜单

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
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		.top-nav{ 
			width: 960px; 
			margin: 60px auto; 
			border: 1px solid #222; 
			background-color: #111; 
			background-image: linear-gradient(#444,#111); 
			border-radius: 6px; 
			box-shadow: 0 1px 1px #777;
			padding: 0;
			list-style: none;
		}
		.top-nav:before, .top-nav:after
		{
			content: "";
			display: table;
		}
		.top-nav:after
		{
			clear: both;
		}
		.top-nav
		{
			zoom: 1;
		}
		.top-nav li
		{
			float: left;
			border-right: 1px solid #222;
			box-shadow: 1px 0 0 #444;
			position: relative;
		}
		.top-nav li a
		{
			float: left;
			padding: 12px 30px;
			color: #999;
			font: bold 12px;
			text-decoration: none;
			text-shadow:0 1px 0 #000;
		}
		.top-nav li a:hover
		{
			color: #fafafa;
		}
		.top-nav li ul
		{
			visibility: hidden;
			position: absolute;
			list-style: none;
			top: 40px;
			left: 0;
			z-index: 1;
			padding: 0;
			background-color: #444;
			background-image: linear-gradient(#444,#111);
			box-shadow: 0 -1 0 rgba(255,255,255,0.3);
			border-radius: 3px;
			opacity: 0;
			margin: 20px 0 0 0 ;
			_margin: 0;
			transition: all 0.5s ease-in-out;
		}
		.top-nav li:hover > ul
		{
			opacity: 1;
			visibility: visible;
			margin: 0;
		}
		.top-nav ul li
		{
			float: none;
			display: block;
			border: 0;
			box-shadow: 0 1px 0 #111,0 2px 0 #666;
		}
		.top-nav ul a
		{
			padding: 10px;
			width: 130px;
			display: block;
			float: none;
			_height: 10px;
		}
		.top-nav ul a:hover
		{
			background-color: #0186ba;
			background-image: linear-gradient(#04acec,#0186ba);
		}
		.top-nav ul li:first-child > a
		{
			border-radius: 3px 3px 0 0;
		}
		.top-nav ul li:last-child > a
		{
			border-radius: 0 0 3px 3px;
		}
		.top-nav ul li:first-child > a:before
		{
			content:  "";
			position: absolute;
			left: 40px;
			top: -6px;
			border-left: 6px solid transparent;
			border-right: 6px solid transparent;
			border-bottom: 6px solid #444;
		}
		.top-nav ul li:first-child > a:hover:before
		{
			border-bottom-color: #04acec;
		}
		.top-nav ul ul
		{
			top: 0;
			left: 150px;
			margin: 0 0 0 20px;
			_margin:0;
			box-shadow: -1px 0 0 rgba(255,255,255,0.3);
		}
		.top-nav ul ul li:first-child a:before
		{
			left: -6px ;
			top: 50%;
			margin-top: -6px;
			border-left: 0;
			border-bottom: 6px solid transparent;
			border-top: 6px solid transparent;
			border-right: 6px solid #3b3b3b;
		}
		.top-nav ul ul li:first-child a:hover:before
		{
			border-right-color: #0299d3;
			border-bottom-color: transparent;
		}
	</style>
</head>
<body>
	<ul class="top-nav">
		<li><a href=""><span class="note">首页</span></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>

这个最喜欢啦~入门CSS3看的这个。也很漂亮！

分享到