这天中午，下午居然有两个同学在问我响应式导航的问题。怎么做，是个问题。但是，也没有大家想的那么复杂。

Bootstrap是个很不错的响应式框架，但是要想自定义样式还比较麻烦。

还是自己动手写一个最好~，想怎么改样式就怎么改。

整体思路：

1、响应式结合CSS3的@media 代码来做。判断主要的几个分辨率情况。

我这里主要考虑了几个分辨率： PC端，认为他是 1200； ipad，认为它是 960；一般的手机，768；再小的手机，460。

当然，我这里的参考也不准确，建议项目中参考 bootstrap的分辨率划分。

2、面包屑导航，点击显示/隐藏菜单。在JS 上主要是添加/删除类，通过类来显示/隐藏菜单。

做之前，先把

<meta name="viewport" content="user-scalable=no,width=device-width,initial-scale=1.0,maximum-scale=1.0">

加在head标签之间，而且必须添加。

1、HTML结构

我要做的导航是这个样子，通栏式的导航。

<div class="section_big navBig">
    <div class="section  nav">
        <h1 class="logo">
            <img src="../images/logo.png" alt="xx公司">
        </h1>
        <ul class="navUl" id="navUl">
            <li class="active"><a href="#">首页</a></li>
            <li><a href="#">公司介绍</a></li>
            <li><a href="#">公司介绍</a></li>
            <li><a href="#">公司介绍</a></li>
        </ul>
        <!-- 面包屑 -->
        <div class="bread" id="bread">
            <img src="../images/hanbao.png" alt="">
        </div>
        <!-- 面包屑 end -->
        <div class="clears"></div>
    </div>
</div>

框架有两层div，外层 section_big 做通栏口框架，内层 section 装载内容部分。

2、基本样式

基本样式，我这里只写了一点，其他的用不上。

*{
    margin: 0; 
    padding: 0;
    box-sizing: border-box;
}
ul,li,ol{
    list-style: none;
}
ul li{list-style: none; float: left;}
a{text-decoration: none;}

.section_big{
    min-width:1200px;
    width:100%;
    margin-left: auto;
    margin-right: auto;
}

.section{
    width: 1200px;
    margin-left: auto;
    margin-right: auto;
}

.clears{
    clear: both;
    height: 0;
    overflow: hidden;
    font-size: 0;
    line-height: 0;
}

3、PC端的样式

.navBig{
    background: #f7e2cc;
}

/*logo*/
.logo{   
    padding-top: 10px;
    padding-bottom: 10px;
    float: left;
}
/*导航*/
.navUl{
    float: left;
    margin-left: 100px;
}
.navUl>li{
    float: left;
    height: 88px;
}
.navUl>li>a{
    display: block;
    height: 88px;
    line-height: 88px;
    padding-left: 20px;
    padding-right: 20px;
    font-size: 16px;
    color: #333;
}
.navUl>li>a:hover{
    background: #f7455a;
    color: #fff;
}
.navUl>.active>a{
    background: #f7455a;
    color: #fff;
}

/*移动端的面包导航，在PC端下，是隐藏的*/
.bread{
    float: right;
    margin-top: 20px;
    display: none;
}

PC端考虑的是内容有1200px 的宽度。这个是我喜欢的内容宽度。按照正常的样式来写就是。

4、响应式导航

响应式导航，考虑到分辨率众多，为了方便管理各个分辨率，我使用了多个CSS样式。在实际项目中，可以用SCSS来管理它们。

按照分辨率由大到小的情况依次加载入HTML中。

这里的 test.css 就是PC 端的样式。

强调下：移动端的样式就是对PC 端样式的覆盖，所以，要把响应式样式放在 PC 端样式的后面。

每个响应式样式，里面都是 :

@media (max-width: 960px){
   /* 样式内容 */
}

这样，较小的分辨率，就会按照需要依次覆盖前面的对应的样式。

主要代码如下：

media_960.css

@media (max-width: 960px){
    .section_big{
        min-width: 100%;  /* 在这种分辨率下，不需要1200px的宽度了，框架就是100%*/
        padding-left: 15px;
        padding-right: 15px;
    }
    .section{
        width: 100%;   /* 在这种分辨率下，不需要1200px的宽度了，框架就是100%*/
    }

    .navBig{ 
        background: #f00;  /* 换个颜色 ，表示响应式有效。*/
    }
    .logo img{
        height: 40px;   /* logo变小点，只改高度，宽度自动成比例缩放 */
    } 

    .navUl>li{
        height: 68px;   /* logo变小后，整个logo的实际高度，导航要跟它保持一致 */
    }
    .navUl>li>a{
        height: 68px;
        line-height: 68px;
    }
}

media_768.css

@media (max-width: 768px){
    .navBig{
        background: #00f;  /* 换个颜色 */
    }
    .bread{
        display: block;  /* 面包导航出现 ，开始移动端导航 */
    }


    .nav{
        position: relative;   /* 导航框架 相对定位，移动导航要盖住后面的内容。 */
    }
    .navUl{
        float: none;   /* 移动导航不再浮动。 */
        position: absolute;  /* 移动导航其他样式，根据项目需要来写。 */
        top:68px; 
        left:0;
        right:0;
        background: #00f;
        margin-left: -15px;
        margin-right: -15px;

        display: none;  /*默认，移动端的导航是隐藏的*/
    }
    .navUl>li{
        float: none;
        height: 40px;
    }
    .navUl>li>a{
        display: block;
        height: 40px;
        line-height: 40px;
        padding-left:15px;
        padding-right: 15px;
        font-size: 14px;
    }
 /*添加showMenu类，就可以让移动端的导航显示
   这个类一定要写在 移动端的分辨率中，表示PC端无效。
*/
    .navUl.showMenu{   
        display: block;
    }
}

media_480.css

@media (max-width: 480px){
    .navBig{
        background: #0f0;
    }
}

总的思路：对于要响应式变化的样式，一定要覆盖到位。对于不变化的样式，就不用重复写了。

4、JS代码

/**
 * Created by Wendy ding on 2019/6/13.
 * 面包导航。借用了jQuery
 */
$(document).ready(function(){
    navBread();
});

function navBread(){
  var bread =  $("#bread");
  var navUl =  $("#navUl");
  bread.on("click",function(){
       navUl.toggleClass("showMenu");
  });
}

navUl.toggleClass("showMenu"); 就是让导航，添加/删除类 showMenu。

这个类，就是展示菜单，但是只在移动端模式下有效。具体哪个分辨率，要根据项目来。这里是把它放在了 768px 分辨率及其以下的。

---------------------------2019.6.18 编辑-------------------------------------

有朋友在问非jQuery的JS怎么写。补一个：


let navUl = document.getElementById("navUl");
let bread = document.getElementById("bread");
bread.addEventListener("click",function(){
    navUl.classList.toggle("showMenu");
});

用到了标签的classList属性，具体可以点这里参考这篇文章

---------------------------2019.6.18 编辑 end-------------------------------------

完工，看看效果。颜色写的很丑，毕竟只是demo。

stones4zd

发布了73 篇原创文章 · 获赞 97 · 访问量 4万+

私信关注

JavaScript+CSS3写一个自定义的响应式导航