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脚本的功能：在移动端时用于导航栏的折叠与展开

---

效果如图：
普通桌面版：

移动端版：