自适应导航栏demo
2020-08-06 本文已影响0人
ahalshai
参考https://www.bilibili.com/video/BV1rE41147qA/?spm_id_from=333.788.videocard.1
adaptive-nav-menu.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Adaptive Nav Menu</title>
<link rel='stylesheet' href="adaptive-nav-menu.css">
<!--link href="https://cdn.bootcdn.net/ajax/libs/font-awesome/5.14.0/css/all.css" rel="stylesheet">
<link href="https://cdn.bootcdn.net/ajax/libs/font-awesome/5.14.0/css/fontawesome.css" rel="stylesheet"-->
<link rel='stylesheet' href="https://cdn.staticfile.org/font-awesome/5.14.0/css/all.css">
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<header>
<div class="nav-menu">
<div class="logo">
<img src='logo.png' >
</div>
<a href="#"><i class="menu-toggle-btn fas fa-bars"></i></a>
<div class="nav-container">
<a class="nav-item"> <i class="fas fa-home home"></i>Home</a>
<a class="nav-item"> <i class="fas fa-align-left about"></i>About</a>
<a class="nav-item"> <i class="fab fa-buffer works"></i>Works</a>
<a class="nav-item"> <i class="fas fa-users team"></i>Team</a>
<a class="nav-item"> <i class="fas fa-headset contact"></i>Contact</a>
</div>
</div>
</header>
</body>
<script>
$('.menu-toggle-btn').click(function () {
$(this).toggleClass('fa-times');
$(".nav-container").toggleClass("active");
})
</script>
</html>
adaptive-nav-menu.css
body{
margin: 0;
padding: 0;
text-decoration: none;
font-family: "sans-serif";
}
header{
background-color: #fff;
height: 100px;
}
.nav-menu{
position:relative;
width: 100%;
height: 100%;
background-color: navy;
}
.logo{
float:left;
}
.logo img{
height: 100px;
}
.nav-container{
float: right;
padding-right:20px;
margin-top: 25px;
display: flex;
align-items: center;
min-height:50px;
}
.nav-item{
margin-left: 10px;
padding-left: 10px;
padding-right: 10px;
color: white;
text-transform: uppercase;
border-radius: 3px;
transition: .3s linear;
}
.nav-item:hover{
color: #2f3640;
background-color:white;
}
.home{
color: red;
}
.about{
color: coral;
}
.works{
color: yellow;
}
.team{
color: cyan;
}
.contact{
color: #111;
}
.menu-toggle-btn{
float: right;
color: white;
line-height: 90px !important;
font-size: 36px;
display: none !important;
cursor: pointer;
}
@media screen and (max-width: 700px) {
.menu-toggle-btn{
display: block !important;
}
.nav-container{
position: fixed;
width: 100%;
max-width: 300px;
top:100px;
right:0;
margin-top: 0;
background:navy;
padding: 20px 40px;
box-sizing: border-box;
display: none;
}
.nav-container.active{
display: block;
}
.nav-item{
display: block;
margin:10px;
}
}
使用的库jQuery，font-awesome
font-awesome官网：https://fontawesome.com/
