响应式导航--可下拉


<!DOCTYPE html>
<html lang="zh">
<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="./font-awesome-4.5.0/css/font-awesome.min.css">
	<link rel="stylesheet" href="./style/reset.css">
	<link rel="stylesheet" href="./style/style.css">
</head>
<body>
	<!-- 版心居中 -->
	<div class="container">
		
		<header class="page_header">
			
			<!-- 第一部分 -->
			<div class="logo">
				<h1>响应式导航</h1>
			</div>
			
			<!-- 第二部分 -->
			<nav class="navbar">
				
				<span class="toggle open">
					<a href="#navlist">
						<i class="fa fa-bars fa-lg"></i>
					</a>
				</span>
				<ul id="navlist">
					<li><a href="javascript:;">首页</a></li>
					<li><a href="javascript:;">博客</a></li>
					<li><a href="javascript:;">论坛</a></li>
					<li><a href="javascript:;">商城</a></li>
					<li><a href="javascript:;">购物车</a></li>
				</ul>
				
				<span class="toggle close">
					<a href="">
						<i class="fa fa-close fa-lg"></i>
					</a>
				</span>
		
			</nav>
		
		</header>
		
	</div>
</body>
</html>

style.css文件

body {
	font-size: 16px;
	font-family: "KaiTi";
}
/* 移动端优先 */
.container {
	width: 100%;
	margin:0 auto;
}

@media(min-width:768px) {
	.container {
		width: 750px;
	}
}
@media (min-width:992px) {
	.container {
		width: 970px;
	}
}

@media (min-width:1200px) {
	.container {
		width: 1170px;
	}
}

.page_header {
	width:100%;
	height: 48px;
	/* 让导航条始终在顶部 */
	position: fixed;
	top:0;
	left: 0;
	background: #333;
	color:#f9f9f9;
}

.logo h1 {
	font-size: 32px;
	line-height: 48px;
	padding:0 8px;
}

.logo {
	border-bottom: 1px solid #000;
}

.navbar {
	background: #333;
	overflow: hidden;
}
.navbar > ul >li {
	width:100%;
	float: left;
}
.navbar>ul>li>a {
	color:#fff;
	height:38px;
	line-height: 38px;
	float: left;
	width:100%;
	padding:0 20px;
}

.navbar>ul>li>a:hover {
	background: #000;
}

.navbar .toggle {
	position: absolute;
	top:0;
	right:0;
	line-height: 48px;
	padding:0 10px;
	background:#333;
}


.toggle a{
	color:#f9f9f9;
}

.open {
	z-index: 2;
}
#navlist {
	display: none;
}

	
#navlist:target {
	display: block;
}

#navlist:target +.close {
	z-index: 3;
}

@media (min-width: 768px) {
	.page_header {
		position: static;
		background: #FFFFFF;
		color:#222;
	}
	
	.logo h1 {
		color:red;
		font-size:40px;
		padding-top: 20px;
		padding-bottom: 20px;
	}
	#navlist {
		display: block;
	}
	#navlist li {
		width:auto;
	}
	#navlist li  a {
		width:auto;
	}
	.toggle {
		display: none;
	}
}

JackieDYH

发布了192 篇原创文章 · 获赞 30 · 访问量 2万+

私信关注

响应式导航--可下拉

猜你喜欢