移動端右側欄導航面板

效果圖 

 

在移動前端開發中，這應該也是很常見的功能。如果是原生安卓或者ios，可能有現成的控件，當然實現這個效果的js插件也有很多。那么原生自己現實一個呢？

整理思路：跟原生實現彈框很像，先有一個遮罩層，遮罩層上面是右側導航欄，首先右側導航欄right: -800px，再用css3 transition過渡動畫慢慢平移到平面內（當然這只是其中一個效果），最后就是點擊空白處關閉側導航。

 

css

　　　　.nav-right-mask {
            width: 100%;
            height: 100%;
            position: fixed;
            top: 0;
            left: 0;
            z-index: 999;
            background-color: rgba(0,0,0,.7);
        }
        .nav-right-content {
            position: absolute;
            top: 0;
            right: -800px;
            height: 100%;
            width: 50%;
            background-color: white;
            text-align: center;
            list-style: none;
            -webkit-transition: .8s;
            -moz-transition: .8s;
            transition: .8s;
            background-color: #040a09;
        }

        .nav-right-content>li:nth-child(1) {
            height: 10%;
        }
        .nav-right-content>li:not(:nth-child(1)) {
            line-height: 2.8em;
            border-bottom: 1px solid #CCC;
        }
        .nav-right-content>li {
            color: black;
            text-align: left;
            padding-left: 1.8em;
        }
        .nav-right-content>li>a {
            color: white;
        }
        .nav-right-content>li>a>strong {
            margin-left: 1.26rem;
            font-size: 1.96rem;
        }
        .nav-right-content>li:nth-last-child(1) {
            position: absolute;
            bottom: 10%;
            color: white;
        }
        .nav-right-content>li>img {
            width: 80%;
        }

 

html

　　　　　　<section class="nav-right-mask li-hide">
                <ul class="nav-right-content">
                    <li></li>
                    <li>
                        <a class="li-text-none" href="http://github.com/helijun">
                            <i class="icon-github right-nav-icon"></i>
                            <strong>Github</strong>
                        </a>
                    </li>
                    <li>
                        <img id="myWechatQr" src="/dist/img/common/my-wechat-qr.jpg">
                        <h4>掃一掃，聯系我</h4>
                    </li>
                </ul>
            </section>

 

js

 

　　　　　　　　　　　$('.menu').on('click',function(event){
                        $('.nav-right-mask').show();
                            setTimeout(function(){
                                $('.nav-right-content').css({right:'0'}).off().on('click',function(event){
                                    event.stopPropagation();
                                });
                            },100)
                            
                            event.stopPropagation();
                            event.preventDefault();
                    })
                    $('.nav-right-mask:not(.nav-right-content)').on('click',function(event){
                        $('.nav-right-mask').hide();
                            setTimeout(function(){
                                $('.nav-right-content').css({right:'-800px'});
                            },100)

                            event.stopPropagation();
                            event.preventDefault();
                    })

比較簡單，沒有太多的解釋。留着這份代碼，方便后面回顧。