美图响应式布局导航条效果

<!DOCTYPE html>
<html lang="zh">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>美图导航条</title>
<link rel="stylesheet" href="css/reset.css">
<link rel="stylesheet" href="fa/css/all.min.css">
<link rel="stylesheet" href="css/style.css">
</head>

<body>

<div class="left-menu">
<ul class="menu-icon">
<li></li>
<li></li>
<li></li>
</ul>

<ul class="nav">
<li><a href="#">手机</a></li>
<li><a href="#">美容仪器</a></li>
<li><a href="#">配件</a></li>
<li><a href="#">服务支持</a></li>
<li><a href="#">企业网站</a></li>
<li>
<a href="#"><i class="fa fa-search"></i></a>
<span>搜索 Meitu.com</span>
</li>
</ul>
</div>

<h1 class="logo">
<a href="#">美图手机</a>
</h1>

<div class="user-info">
<a href="#">
<i class="fa fa-user"></i>
</a>
</div>
</div>
</div>
</body>

</html>

// CSS

a{
color: #fff;
text-decoration: none;
&:hover{
color: #bbb6b6;
}
}

.top-bar-wapper{
background-color: #000;
}

.top-bar{
max-width: 1200px;
height: 48px;
margin: 0 auto;
padding: 0 14px;
display: flex;

//设置垂直居中
align-items: center;
// 设置多出空白区域布局
justify-content: space-between;
}

.left-menu{

//设置菜单鼠标移入显示
&:active{
.nav{
display: block;
}
}

// 设置菜单
.nav{

display: none;
// 开启绝对定位
position: absolute;
background-color: #000;

//默认出来时，宽度高度没有撑满，那么我们需要设置(上下左右四个定位值为最大，依据定位满足的特点，可以将内容撑满),我们这定位是根元素
top: 48px;
bottom: 0;
left: 0;
right: 0;

padding-top: 35px;

//设置菜单
li{
width: 80%;
margin: 0 auto;
border-bottom: 1px solid #4e4e4e;
a{
// 原版效果中整行都可以点，所以把它设置为block
display: block;
line-height: 44px;
font-size: 14px;
}

&:last-child a{
display: inline;
margin-right: 6px;

}

span{
color: #fff;
font-size: 14px;
}
}
}

// 设置左侧导航图标
.menu-icon{
width: 18px;
height: 48px;
position: relative;
li{
width: 18px;
height: 1px;
background-color: #fff;
position: absolute;
// 设置过渡时间
transition: 0.5s;
transform-origin: left center;
}
li:nth-child(1){
top: 18px;
}
li:nth-child(2){
top: 24px;
}
li:nth-child(3){
top: 30px;
}

// 设置效果，鼠标移入才使用那几种样式
&:active{
li:nth-child(1){
// 向下旋转
transform: rotateZ(40deg);
}
li:nth-child(2){
// 设置隐藏 visibility: hidden;
opacity: 0;
}
li:nth-child(3){
// 向上旋转
transform: rotateZ(-40deg);
}
}
}
}

.logo {
a{
display: block;
//将文字内容隐藏
text-indent: -9999px;
width: 122px;
height: 32px;
background-image: url(../img/meituback.png);
background-size: 400px 400px;
}

}

//设置媒体查询
@media only screen {
//断点 768px
@media (min-width:768px) {

//调整顺序
.left-menu{
flex: auto;
.nav{
display: flex;
//关闭定位
position: static;
justify-content: space-around;
padding: 0;
li{
width: auto;
border-bottom: none;
margin: 0;
a{
line-height: 48px;
}
span{
display: none;
}
}
}
.menu-icon{
display: none;
}
order: 2;
}

.logo{
order: 1;
}

.user-info{
order: 3 ;
}
}
}

来源：oschina

链接：https://my.oschina.net/u/3994350/blog/3223368

标签

响应式布局