Js + Css3 制作一个导航条

前言：

有些站长说想做一个手机适应的网站,但是导航太难了,
如果要使用框架的话,代码非常多,冗余.再用IDE打开,那直接就不响应了；
用简单的代码来实现,js,css3利用的好,同样可以做出好看实用的导航,关键是代码极少.
PS : 摘录来自https://www.yangqq.com

Html:

<div id="mnav">
    <h2 id="navicon-btn"><span class="navicon"></span></h2>
    <ul id="navlist-box" class="navlist">
        <li><a href="/">网站首页</a></li>
        <li><a href="/">关于我们</a></li>
        <li><a href="/">模板分享</a></li>
        <li><a href="/">学无止境</a></li>
        <li><a href="/">博客导航</a></li>
        <li><a href="/">慢生活ing</a></li>
    </ul>
</div>

Css:

*{margin:0;padding:0}
ul,ol{list-style: none;}
/* 导航栏目 */
#mnav {width: 100%; position: fixed; top: 0; right: 0; background: rgba(1,1,1,0.8);clear: both;vertical-align: middle; }
#mnav ul {width:1200px;margin: 0 auto; height:60px;line-height: 60px;} 
#mnav ul.navbar-collapse{display:block}       
#mnav li {position: relative; float:left; font-size: 16px; overflow: hidden; text-align: center;margin: 0 25px;padding:0 5px;}
#mnav li::after{content: ""; position: absolute; bottom: 1px; left: 0; width:0; height: 2px;background-color: #fff;transition: all .5s;z-index: 999;}
#mnav li:hover::after{width: 100%;}
#mnav li > a{display:block; color: #fff; text-decoration: none;}
#mnav a:hover { color: #fff;}

/* 导航栏目icon */
#mnav h2 { float:right;color: #fff;font-size: 18px;height: 40px;line-height: 40px;display:none;}
#mnav h2 .navicon { display: inline-block; position: relative; width: 30px; height: 5px; background-color: #FFFFFF; }
#mnav h2 .navicon:before,#mnav h2 .navicon:after { content: ''; display: block; width: 30px; height: 5px; position: absolute; background: #FFFFFF; -webkit-transition-property: margin, -webkit-transform; transition-property: margin, -webkit-transform; transition-property: margin, transform; transition-property: margin, transform, -webkit-transform; -webkit-transition-duration: 300ms; transition-duration: 300ms; }
#mnav h2 .navicon:before { margin-top: -10px; }
#mnav h2 .navicon:after { margin-top: 10px; }
#mnav h2 .navicon { margin: 15px; }

/* 展开后导航栏目icon */
#mnav h2.open .navicon { background: none; }/* 使用背景色隐藏中间的红线 */
#mnav h2.open .navicon:before { margin-top: 0; -webkit-transform: rotate(45deg); transform: rotate(45deg); }
#mnav h2.open .navicon:after { margin-top: 0; -webkit-transform: rotate(-45deg); transform: rotate(-45deg); }
#mnav h2.open .navicon:before, #mnav h2.open .navicon:after { content: ''; display: block; width: 30px; height: 5px; position: absolute; background: #FFFFFF; -webkit-transition-property: margin, -webkit-transform; transition-property: margin, -webkit-transform; transition-property: margin, transform; transition-property: margin, transform, -webkit-transform; -webkit-transition-duration: 300ms; transition-duration: 300ms; }

@media screen and (max-width: 480px) {
    #mnav ul {float:left; width:100%; height: unset; display: none; border-top: 1px solid #ccc;}
    #mnav li {float: none; display:block; margin:0; line-height: 40px; padding:0 15px;}
    #mnav li::after{display: none;}
    #mnav h2{display: inline-block;}
}

Javascript:

window.onload = function (){
    var navicon_btn = document.getElementById("navicon-btn");
    var mnav_lists = document.getElementById("navlist-box");
    var nav_class = "navbar-collapse";
    var icon_class = "open";
    navicon_btn.onclick = function () {
        var mnav_class = mnav_lists.getAttribute('class');
        if (mnav_class.indexOf(nav_class) > -1) {
            mnav_lists.classList.remove(nav_class);
            navicon_btn.classList.remove(icon_class);
        } else {
            mnav_lists.classList.add(nav_class);
            navicon_btn.classList.add(icon_class);
        }
    }
}