css媒体查询与导航栏

前言：之前的导航栏一直都在用bootstrap框架，基于框架的导航栏自适应性很好，所以一直就懒于自己去写，最近在看网页的自适应性，所以就自己动手写了个导航栏，效果及代码如下：

---

代码：
html代码：

<nav>    <div class="btn-menu">        <a href="#" class="btn-menu-icon btn-list-icon"></a>    </div>    <div class="clearfix"></div>     <ul class="nav-container-list">        <li class="nav-list-item"><a href="#">item1</a></li>        <li class="nav-list-item"><a href="#">item2</a></li>        <li class="nav-list-item"><a href="#">item3</a></li>        <li class="nav-list-item"><a href="#">item4</a></li>        <li class="nav-list-item"><a href="#">item5</a></li>    </ul></nav>

注意：因为在.btn-menu-icon类中用到了坐浮动，所以加了个div用于清除浮动
css代码：

body{    padding: 0;    margin:0;}nav{    height:50px;    background: #000;    line-height: 30px;}.nav-container-list{    display:block;    margin:0 auto;    background: #000;}.nav-list-item{    display: inline-block;}.nav-list-item a{    text-decoration: none;    display: block;    color: #fff;    padding: 10px 40px;}.btn-menu{    display: none;    border:0;    padding: 8px 0;}.btn-list-icon{    background: url(images/list.png) no-repeat center center;}.btn-close-icon{    background: url(images/close.jpg) no-repeat center center;}.btn-menu-icon{    border:none;    width: 30px;    height:30px;    background-size: cover; /*让图片覆盖整个div*/    float: left;    cursor: pointer;    margin-left: 10px;}.clearfix /*清除浮动*/{    content: '';    display: block;    clear: both;}@media (max-width:480px) /*媒体查询，当页面宽度小于等于480px时执行*/{    .btn-menu    {        display: block;    }    .nav-container-list    {        display: none;    }    .nav-list-item    {        display: block;        background: #000;        margin-left: -40px;    }}

js脚本：

<script type="text/javascript">    var btn = document.querySelector('.btn-menu-icon');    var nav = document.querySelector('.nav-container-list');    var flag = false;    btn.onclick = function()    {        flag = !flag;        if (flag)        {            nav.style.display = 'block';            btn.classList.remove('btn-list-icon');            btn.classList.add('btn-close-icon');        }        else        {            nav.style.display = '';            btn.classList.remove('btn-close-icon');            btn.classList.add('btn-list-icon');         }    }

J脚本的功能：在移动端时用于导航栏的折叠与展开

---

效果如图：
普通桌面版：

移动端版：