1.查看简书的响应式
使用Chorme浏览器打开https://www.jianshu.com，然后F12（Fn+F12）,查看网页样式
1.1 使用iPad时：
iPad.png
1.2 使用iPhone 6/7/8时：
iPhone.png
事实上，在还未使用F5（Fn+F5）进行页面刷新前，导航栏是实现了很好的响应式设计，所以接下来就仿照简书的导航栏来设计我们自己的响应式导航栏。
2.效果展示
下拉选择框是在点击右上方按钮的情况下会显示出来。
效果展示.png
3.代码分析
3.1 HTML代码：三个区域（Logo区，导航区，按钮区）
<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>响应式导航栏</title> <link rel="stylesheet" type="text/css" href="styles/index.css"></script></head><body> <header> <div class="hd_con"> <!--Logo区域--> <div class="hd_logo"> <h1>简书</h1> </div> <!--导航区域--> <ul class="hd_list"> <li><a href="#">发现</a></li> <li><a href="#">关注</a></li> <li><a href="#">消息</a></li> <li><a href="#">我的</a></li> </ul> <!--按钮区域--> <div class="hd_btn"> <img class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="images/icon_btn.png"> </div> </div> </header></body></html>
3.2 CSS代码：控制页面的正常显示，按钮区在一开始时隐藏
*{ margin: 0; padding:0;
}a{ text-decoration: none; color: #000;
}a:hover{ color: #ed705b;
}ul{ list-style-type: none;
}header{ width: 100%; height: 60px; background-color: #fff; position: fixed; top: 0; left: 0; border-bottom: 1px solid #e8e8e8;
}.hd_con{ width: 1200px; margin: 0 auto;
}.hd_con .hd_logo{ float: left; line-height: 60px; margin-left: 10px;
}.hd_con .hd_logo h1{ font-size: 20px; color: #ed705b;
}.hd_con .hd_list{ float: right;
}.hd_con .hd_list li{ float: left; margin-right: 20px; line-height: 60px;
}.hd_btn{ display: none;
}3.3 设置ViewPort
<meta name="viewport" content="width=devie-width,height=device-height,initial-scale=1.0, maximum-scale=1.0,user-scalable=no">
3.4 媒体查询：按照Bootstrap设定的端点进行设置
第一个区域：992px-1199px
因为屏幕的宽度变短，所以当页面宽度缩小在该区域时，可以对页面导航内容区域的长度缩短。
@media only screen and (max-width: 1199px)
{ .hd_con{ width: 900px;
}
}第二个区域：768px-991px
因为此时页面的长度已经较短，但是导航栏的内容区域的内容都能够正常显示，所以为了内容适配屏幕的宽度，设置为百分比的形式更为恰当。
@media only screen and (max-width: 991px)
{ .hd_con{ width: 100%;
}
}第三个区域：0-767px
该区域的内容，因为缩放至一定的宽度，导航列表就不能够正常的显示了，所以就变成下拉菜单的形式，所以要设置下拉菜单的样式，为了提示下拉菜单的存在，事先设置的导航按钮就要由隐藏状态转化为显示状态。
@media only screen and (max-width: 767px)
{ .hd_btn{ display: block; position: absolute; right:10px; top:10px; cursor: pointer;
} .hd_con .hd_list{ position: absolute; top:60px; left: 0; width: 100%; background-color: #fff; display: none; border-bottom: 1px solid #e8e8e8;
} .hd_con .hd_list li{ float: none; text-align: center; border-top: 1px solid #e8e8e8; margin-right: 0px;
}
}4.监听事件
使用JQUERY库，首先引入JQUERY库
<script type="text/javascript" class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="scripts/jquery-1.11.3.min.js">
4.1 页面点击事件
$(function(){
$(".hd_btn").click(function(){
$(".hd_list").slideToggle();
})
})4.2 浏览器大小变化事件，检测到屏幕的宽度小于767时，让下拉菜单显示，提示下拉菜单的存在。
$(window).resize(function(){ if($(this).width() < 767)
{
$(".hd_con .hd_list").show();
}
})
作者：瑾瑜爱上猫
链接：https://www.jianshu.com/p/212bdef9540e
点击查看更多内容
为 TA 点赞
评论
共同学习，写下你的评论
评论加载中...
作者其他优质文章
正在加载中
感谢您的支持，我会继续努力的～
扫码打赏，你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫，即可进行扫码打赏哦