用HTML模仿做简书的官网首页,2018-05-22 仿简书的响应式导航栏

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区，导航区，按钮区)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

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库

4.1 页面点击事件$(function(){

$(".hd_btn").click(function(){

$(".hd_list").slideToggle();

})

})

4.2 浏览器大小变化事件，检测到屏幕的宽度小于767时，让下拉菜单显示，提示下拉菜单的存在。$(window).resize(function(){    if($(this).width() 

{

$(".hd_con .hd_list").show();

}

})

作者：瑾瑜爱上猫

链接：https://www.jianshu.com/p/212bdef9540e