前端

下拉菜单(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看的这个。也很漂亮！

分享到
文章
实习招聘面试经历-4

（啪啪啪，之前写完文章写了一半不知怎么就忘记继续发=。= 现在是8/2，文章大概是一个多月前写的）终于到最后一篇啦。虽然技术面试早就结束了，不过还是前个星期接到最后一家的Hr的电话，因为已经确定去哪一家了所以就拒绝了。至此所有的面试都结束啦~结果还是挺不错的。 总结一下最后一家的面试，电面，周日早上

实习招聘面试经历-3

1.跨域 讲jsonp的原理,实现 jsonp的安全性:当时自己说的是可不可以判断来源,比如请求头,域名.然后面试官说jsonp是get请求,没有origin的.我又猜测用reffer? 嗯,这个对了;我还猜测是不是用cookie和session.但是直接的script请求是不能带上这个的.面试官让

实习招聘面试经历-2

1. Angular双向绑定的实现嗯…面试三次,每个面试官都会问我这个问题,这里还是贴一下参考的文章吧:Angular沉思录（一） 数据的双向绑定AngularJS 数据双向绑定揭秘简易实现版本:1234567891011121314151617181920212223242526272829303

实习招聘面试经历-1

1. 无线端开发和PC端开发有什么不同？从三个方面讲：HTML：使用很多新的标签：12&lt;meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1"&gt

移动端SeeApp开发总结-5

这次总结一下用Angular的一些小技巧~ 好的实践 自动启动：ng-app，自动引导启动第一个ng-app;手工启动：angular.bootstrap() 使用ng-bind代替双括号语法。避免Angular用数据替换时出现双括号；实在要用时，使用ng-cloak,并且能避免内容闪烁 需要使用b

页面
关于我

你好。我叫林浩笙。目前在广东外语外贸大学，2013年入读，计算机专业。平时非常安静，话比较少。和兴趣对的人比较能聊得来。上了大学加入了学校的管乐团，学习的乐器是Baritone（上低音号），你也可以叫他Euphonium（次中音号）。认识了很多朋友，以后工作有机会还想参加乐团。专业方面，之前对设计有

categories
tags
分类
前端前端
计算机本科知识计算机本科知识
JSJS
移动端移动端
知识积累知识积累
标签
面试面试
前端前端
AngularAngular
JavaScriptJavaScript
ajaxajax