侧滑导航

前端入坑纪 15

好日子，要双更
成双成对，倍有滋味

提前预祝天下的妈妈们，母亲节快乐！

素素的侧滑

OK，first things first！项目链接

HTML 结构

    <a id="menu" href="javascript:;">menu</a>
    <div id="fixWrp"></div>
    <ul id="navs">
        <li><a href="javascript:;">导航一</a></li>
        <li><a href="javascript:;">导航二</a></li>
        <li><a href="javascript:;">导航三</a></li>
        <li><a href="javascript:;">导航四</a></li>
        <li><a href="javascript:;">导航五</a></li>
        <li><a href="javascript:;">导航六</a></li>
    </ul>

简单的结构，都是必须的元素

CSS 结构

        * {
            margin: 0;
            padding: 0
        }
        
        a {
            color: #333;
            text-decoration: none;
        }
        
        html,
        body {
            font-family: Verdana, Geneva, Tahoma, sans-serif, "Microsoft YaHei";
            height: 100%;
            background: #fefefe;
            text-align: center;
        }
        
        #menu {
            display: block;
            color: #fff;
            background-color: skyblue;
            border-radius: 3px;
            width: 60px;
            height: 36px;
            line-height: 36px;
            font-size: 13px;
            text-transform: uppercase;
            margin-left: 1.2rem;
            margin-top: 1rem;
            z-index: 3
        }
        
        body {
            overflow: hidden
        }
        
        #navs {
            width: 37%;
            font-size: 14px;
            line-height: 40px;
            background-color: #f1f1f1;
            position: fixed;
            left: 0;
            top: 0;
            bottom: 0;
            transform: translateX(-100%);
            overflow: scroll-y;
            z-index: 9;
            /*过渡的效果css*/
            transition: all 200ms ease-in;
        }
        
        #fixWrp {
            position: fixed;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            background-color: rgba(0, 150, 205, .3);
            z-index: 6;
            display: none;
        }
        
        #navs a {
            display: block;
        }

navs和fixWrp都是fixed定位的，并且#navs的z-index比fixWrp大

JS 结构

       var menu = document.getElementById("menu"),
            navs = document.getElementById("navs"),
            fixWrp = document.getElementById("fixWrp"),
            navLias = navs.getElementsByTagName("a");
        // 首先menu设置个自定义属性，来区别侧滑导航的不同状态
        navs.setAttribute("trigerSte", "off");
        // 侧滑导航关闭时，要做的操作
        function clsNav() {
            navs.style.transform = "translateX(-100%)";
            navs.setAttribute("trigerSte", "off");
            fixWrp.style.display = "none"

        }
        // 侧滑导航打开时，要做的操作
        function opeNav() {
            if (navs.getAttribute("trigerSte") == "off") {
                navs.style.transform = "translateX(0)";
                navs.setAttribute("trigerSte", "on");
                fixWrp.style.display = "block"
            }
        }
        // 点击menu时，打开侧滑导航
        menu.onclick = opeNav;
        // 点击底下的蓝底（fixWrp）时，关闭侧滑导航
        fixWrp.onclick = clsNav;
        // 点击ul里的每个a时，关闭侧滑导航
        for (var i = 0; i < navLias.length; i++) {
            navLias[i].onclick = clsNav;
        }

注解已经添加，感兴趣的，可以好好研究下，这个效果很简单的，不难