【HTML+CSS】响应式导航栏2.0

最新推荐文章于 2024-07-25 16:56:40 发布

NpcCat

最新推荐文章于 2024-07-25 16:56:40 发布

阅读量2.3k

点赞数

本文链接：https://blog.csdn.net/NpcCat/article/details/122932225

版权

源码

HTML
CSS
效果

HTML

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<link rel="stylesheet" type="text/css" href="NavStyle2.css" />
		<link rel="stylesheet" type="text/css" href="https://cdn.staticfile.org/font-awesome/4.7.0/css/font-awesome.css" />
		</head>
	<body>
		<nav id="top">
			
			<div class="logo">
				<img src="pic/logo2.png" />
			</div>
			
			<div class="nav-text">
				
				<input type="checkbox" id="check" />
				<label for="check" class="checkbtn">
					<i class="fa fa-bars"></i>
				</label>
				
				
				<ul class="nav-titles">
					<li class="nav-title">
						Home
					</li>
					<li class="nav-title">
						<div class="nav-link">Project</div>
						<div class="nav-substitle">
							<a>Design</a>
							<a>Description</a>
							<a>Contribution</a>
							<a>Safety</a>
						</div>
					</li>
					<li class="nav-title">
						<div class="nav-link">Project</div>
						<div class="nav-substitle">
							<a>Design</a>
							<a>Description</a>
							<a>Contribution</a>
							<a>Safety</a>
						</div>
					</li>
					<li class="nav-title">
						<div class="nav-link">Project</div>
						<div class="nav-substitle">
							<a>Design</a>
							<a>Description</a>
							<a>Contribution</a>
							<a>Safety</a>
						</div>
					</li>
				</ul>
				
			</div>
			
		</nav>
	</body>
</html>

CSS

*{
	padding: 0;
	margin: 0;
}
#top{
	background-color: #000000;
	height: 70px;
	position: fixed;
	width: 100%;
}
.logo img{
	width: 100%;
	border-radius: 100px;
}
.logo{
	background-color: #000000;
	position: absolute;
	width: 7%;
	border-radius: 80px;
}
.nav-text{
	width: fit-content;
	margin: auto;
}
.nav-title{
	display: inline-block;
	height: 60px;
	text-align: center;
	line-height: 70px;
	width: 100px;
	color: white;
	vertical-align: top;
}
.nav-substitle{
	background-color: #353535;
	border-radius: 5px;
	line-height: 50px;
	width: 200px;
	display: none;
	opacity: 0.8;
}
.nav-substitle a{
	display: block;
	border: 3px solid transparent;
}
.nav-substitle a:hover{
	border: 3px solid white;
	transition-duration: 0.3s;
	border-radius: 5px;
	opacity: 1;
}
.nav-title:hover{
	cursor: pointer;
	border-bottom: 3px solid white;
	transition-duration: 1s;
}
.nav-link:hover ~ .nav-substitle{
	display: block;
}
.nav-substitle:hover{
	display: block;
}
.checkbtn{
	font-size: 30px;
	color: white;
	float: right;
	line-height: 70px;
	margin-right: 40px;
	cursor: pointer;
	display: none;
}
#check{
	display: none;
}
@media (max-width: 858px) {
	.checkbtn{
		display: block;
	}
	.logo{
		width: 60px;
	}
	ul{
		position: fixed;
		width: 100%;
		height: 100%;
		background: #2c3e50;
		top: 70px;
		left: -100%;
		text-align: center;
		transition: all 0.5s;
	}
	nav ul li{
		display: block;
		margin: 20px 0;
		line-height: 20px;
	}
	.nav-title{
		width: 100%;
	}
	nav ul li a{
		font-size: 20px;
	}
	.nav-substitle{
		width: 100%;
		position: relative;
		top: -5px;
	}
	#check:checked ~ ul{
		left: 0;
	}
	.nav-text{
		width: 100%;
	}
}