html文件
<header class='header'>
<a href='' class='logo'><img src='img/logo.png' '/></a>
<div class="head-nav">
<ul class='nav'>
<li><a href='./home.html' style="color: cornflowerblue; text-decoration: underline; text-underline-offset: 10px;">Home</a></li>
<li><a href='./product.html'>Product</a></li>
<li><a href='./about.html'>About Us</a></li>
<li><a href='./contact.html'>Contact</a></li>
</ul>
</div>
</header>
css样式
.header{
width: 100%;
height: 100px;
margin: 0 0;
display: flex;
/* overflow: hidden; */
position: fixed;
top: 0;
left: 0;
z-index: 11;
background-color: rgba(255, 255,255,0.8);
text-align: center;
align-items: center;
justify-content: space-between;
border-bottom: 3px solid cornflowerblue;
padding: 0 50px;
box-sizing: border-box;
}
.head-menu{
width: 40px;
border: 1px solid gray;
border-radius: 3px;
display: none;
}
.head-menu i{
display: block;
width: 30px;
height: 2px;
background-color: gray;
margin: 5px auto;
cursor: pointer;
}
.logo{
float: left;
}
.logo img{
width: 100px;
height: auto;
margin-top: 10px;
}
.nav{
float: right;
display: flex;
}
.nav li{
float: left;
transition: all 0.3s ease;
}
.nav li a{
display: block;
line-height: 80px;
padding: 0 30px;
font-size: 18px;
color: black;
}
.nav li:hover a{
color: cornflowerblue;
}
显示效果
添加响应式布局
html文件 (加了三个i标签)
<header class='header'>
<a href='' class='logo'><img src='img/logo.png' '/></a>
<div class="head-nav">
<ul class='nav'>
<li><a href='./home.html' style="color: cornflowerblue; text-decoration: underline; text-underline-offset: 10px;">Home</a></li>
<li><a href='./product.html'>Product</a></li>
<li><a href='./about.html'>About Us</a></li>
<li><a href='./contact.html'>Contact</a></li>
</ul>
</div>
<div class="head-menu">
<i></i>
<i></i>
<i></i>
</div>
</header>
css样式
.bodyBG{
position: fixed;
width: 100%;
height: 100%;
top: 0;
left: 0;
background: rgba(0, 0, 0,0);
display: none;
z-index: 9;
}
@media(max-width:1200px){
.head-menu{
display: block;
}
.head-nav{
position: absolute;
top: 100px;
left: 0;
width: 100%;
display: none;
}
.nav{
width: 100%;
height: auto;
flex-direction: column;;
text-align: center;
}
.nav li{
}
.nav li a{
border-bottom: 1px solid rgb(232, 232, 232);
background-color: rgba(255, 255,255,0.9)
}
.head-menu i{
transform-origin: left;
transition:0.3s;
}
.head-menu.active i:nth-child(1){
transform: rotate(26deg);
width: 33px;
}
.head-menu.active i:nth-child(2){
opacity: 0;
}
.head-menu.active i:nth-child(3){
transform: rotate(-26deg);
width: 33px;
}
}
js(需要引入jquery)
$(function(){
//点击菜单
$(".head-menu").click(function(){
$(".bodyBG").show()
$(this).toggleClass("active")
$(".head-nav").slideToggle()
})
$(".bodyBG").click(function(){
$(".head-menu").removeClass("active");
$(".head-nav").slideUp()
$(this).hide()
})
})
显示效果