Fork me on GitHub

二级导航栏

发表于 | 分类于
字数统计: | 阅读时长 ≈

为了工作和平时项目的需要，在自己工作空余时间自己写的一个css样式
同时也是为了巩固css和sass的知识
目的是为了：适应每一个项目自己重置样式,创造属于自己的style
虽然目前已有很多流行和成熟的css框架，如bootstrap,Semantic UI,Pure…都有各的优点
但还是决定做更加适合前端工作的css样式，我并没说是css框架，因为还需要不断更新
自己在空余时间也会不断的去优化，学习和进步

css样式

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
192
193
194
195
196
197
198
199
 @charset "UTF-8";
* {
  margin: 0;
  padding: 0;
  -webkit-font-smoothing: antialiased;
}

body, html {
  height: 100%;
  overflow: hidden;
}

.container-fluid {
  width: 100%;
  padding-bottom: 10px;
}

.carect {
  position: relative;
  width: 0;
  height: 0;
  margin-left: 5px;
  margin-bottom: 2px;
  border-top: 6px solid;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-radius: 10px;
  display: inline-block;
}

/*
    导航组件
*/
nav {
  width: 100%;
  height: 91px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-box-shadow: 0 2px 4px #ccc;
  box-shadow: 0 2px 4px #ccc;
  padding: 10px 0;
}
nav li, nav a {
  text-decoration: none;
  list-style: none;
}
nav .nav-logo {
  width: auto;
  height: 100%;
  margin-left: 20px;
  float: left;
}
nav .nav-logo a, nav .nav-logo li, nav .nav-logo ol, nav .nav-logo span, nav .nav-logo p {
  font-size: 30px;
  font-weight: bold;
  list-style: none;
  color: #1f79ec;
  text-decoration: none;
}
nav .nav-logo img {
  max-width: 100%;
  max-height: 100%;
  margin-left: 100px;
  width: 160px;
  height:91px;
}
nav ::-webkit-scrollbar {
  display: none;
}
nav .nav-list {
  /*nav-list*/
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  float: right;
  line-height: 80px;
  margin-right: 120px;
}
@media (max-width: 1200px) {
  nav .nav-list {
    position: fixed;
    height: 91px;
    top: 0;
    padding-top: 10px;
    width: 60%;
    background: #fff;
    left: -60%;
    -webkit-transition: 1s;
    transition: 1s;
    -webkit-box-shadow: 3px 0px 10px #f0eded;
    box-shadow: 3px 0px 10px #f0eded;
  }
}
nav .nav-list > li {
  position: relative;
  list-style: none;
  float: left;
  text-align: center;
}
@media (max-width: 1200px) {
  nav .nav-list > li {
    width: 100%;
    margin: 0;
    overflow: hidden;
  }
  nav .nav-list > li {
    margin-bottom: 15px;
  }
}
nav .nav-list > li .active {
  color: #fff;
  background: #094fb7;
}
nav .nav-list > li a {
  color: #5a5c5f;
  display: inline-block;
  line-height: 32px;
  padding: 1px 15px;
  margin: 0 10px;
  font-size: 15px;
  border-radius: 5px;
  text-decoration: none;
}
@media (max-width: 1200px) {
  nav .nav-list > li a {
    width: 100%;
    border-radius: 0;
    margin: 0;
  }
}
nav .nav-list > li a:hover {
  color: #fff;
  background-color: #094fb7;
}
nav .nav-list > li .menu {
  min-width: 100px;
  background: #fff;
  -webkit-box-shadow: 0 2px 10px #ccc;
  box-shadow: 0 2px 10px #ccc;
  position: absolute;
  border-radius: 5px;
  white-space: nowrap;
  left: 0;
  height: 0;
  overflow: hidden;
  -webkit-transition: 1s;
  transition: 1s;
}
@media (max-width: 1200px) {
  nav .nav-list > li .menu {
    position: relative;
    width: 100%;
    text-align: center;
    border-radius: 0;
    -webkit-box-shadow: 0 -1px 7px #ccc inset;
    box-shadow: 0 -1px 7px #ccc inset;
  }
}
nav .nav-list > li .menu li a {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  margin: 0;
}
nav .nav-list > li:hover .menu {
  height: auto;
}
nav .nav-menu {
  display: none;
  z-index: 999;
  background: #fff;
  cursor: pointer;
}
@media (max-width: 1200px) {
  nav .nav-menu {
    display: block;
    float: right;
    padding: 8px 5px;
    position: relative;
    border: 1px solid #ccc;
    border-radius: 5px;
    margin-right: 15px;
  }
  nav .nav-menu span {
    height: 2px;
    width: 25px;
    display: block;
    background: #CCC;
    border-radius: 10px;
  }
  nav .nav-menu span + span {
    margin-top: 6px;
  }
}
nav .open {
  left: 0%;
  overflow: auto;
}

/*# sourceMappingURL=zd-1.0.css.map */

html 和 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>二级导航栏</title>

<link rel="stylesheet" href="css/zd-1.0.css">

</head>
<body>
<nav>
	<!-- logo -->
	<div class="nav-logo">
		<a href="###"><img src="img/5e2b1c7056a1ae79916139519e01957.png" alt=""></a>
	</div>
	<!-- 控制menu -->
	<div class="nav-menu">
		<span></span>
		<span></span>
		<span></span>
		
	</div>
	<!-- 菜单 -->
	<ul class="nav-list">
		<li>
			<a href="" class="active">首页<div class="carect"></div></a>
			
		</li>
		<li>
			<a href="">我是</a>
			<ul class="menu">
				<li><a href="">不断学习</a></li>
				<li><a href="">不断进步</a></li>
			</ul>
		</li>
		<li>
			<a href="">一个</a>
			<ul class="menu">
				<li><a href="">不断学习</a></li>
				<li><a href="">不断进步</a></li>
			</ul>
		</li>
		<li>
			<a href="">热爱</a>
			<ul class="menu">
				<li><a href="">不断学习</a></li>
				<li><a href="">不断进步</a></li>
			</ul>
		</li>
		<li>
			<a href="">Web</a>
			<ul class="menu">
				<li><a href="">不断学习</a></li>
				<li><a href="">不断进步</a></li>
			</ul>
		</li>
		<li>
			<a href="">前端</a>
			<ul class="menu">
				<li><a href="">不断学习</a></li>
				<li><a href="">不断进步</a></li>
			</ul>
		</li>
		<li>
			<a href="">的有</a>
			<ul class="menu">
				<li><a href="">不断学习</a></li>
				<li><a href="">不断进步</a></li>
			</ul>
		</li>
		<li>
			<a href="">为青</a>
			<ul class="menu">
				<li><a href="">不断学习</a></li>
				<li><a href="">不断进步</a></li>
			</ul>
		</li>
		<li>
			<a href="">年！</a>
			<ul class="menu">
				<li><a href="">不断学习</a></li>
				<li><a href="">不断进步</a></li>
			</ul>
		</li>
	</ul>
</nav>
<div>
	<button ></button>
</div>
<script src="js/jquery.min.js"></script>
<script>
	$(document).click(function(){
		$('.nav-list').removeClass('open')
	})
	$('.nav-menu,.nav-list').click(function(e){e.stopPropagation()})
	$('nav').find('.nav-menu').click(function(e){
		$('.nav-list').toggleClass('open')
	})
</script>


</body>
</html>
-------------本文结束感谢您的阅读-------------
分享到： 收藏夹 复制网址 邮件 微信 QQ空间 腾讯微博 豆瓣 一键分享 更多