使用mmenu制作侧边抽屉菜单

要实现如上图所示的侧边菜单栏，这个要求。

好吧没有什么好写的我原来做过一个企业官网手机端刚好也有这种侧栏抽屉的菜单，这个菜单是我两年前做的，我原本想用jquery或者js实现类似这种效果的，毕竟那是两年前实现的了

但是居然好吧要求就是尽快弄好，然后我测试了一下我两年前做的那个官网的侧边抽屉菜单在安卓机还有苹果机上展示和使用都是没有问题的。

它的官网是   http://mmenu.frebsite.nl/

我使用的是bacis menu  http://mmenu.frebsite.nl/tutorials/off-canvas/styling-lists.html

然后改的

html:

script type = "text/javascript" src = "js/jquery.mmenu.js" ></ script >

< link rel = "stylesheet" type = "text/css" href = "css/jquery.mmenu.css" />

               < nav id = "wd-menu" class = "m-menu" >

                  < div >

                    < div class = "m-login" >

                        < a href = "" >

                              < em >

                                    点击登录     

                              </ em >

                              登录更多精彩功能！                         

                        </ a >

                    </ div >

                  < ul class = "mm-nolistview" >

                     < li class = "turn-index" >< a href = "" >首页</ a ></ li >

                     < li class = "turn-news" >< a href = "" >网贷新闻</ a ></ li >

                     < li class = "turn-licai" >< a href = "" >理财知识</ a ></ li >

                     < li class = "turn-" >< a href = "" >财经资讯</ a ></ li >

                     < li class = "turn-special" >< a href = "" >理财专题</ a ></ li >

                     < li class = "turn-hot" >< a href = "" >热点新闻</ a ></ li >

                     < li class = "turn-joke" >< a href = "" >开心天地</ a ></ li >

                     < li class = "turn-answer" >< a href = "" >蜂投问答</ a ></ li >

                     < li class = "turn-forum" >< a href = "" >蜂论坛</ a ></ li >

                  </ ul >                   

                  </ div >

            </ nav >

js:

          < script type = "text/javascript" >

               $( document ). ready ( function () {

                  $( "#wd-menu" ).mmenu({

                     // options

                     navbar          : false

                  }, {

                    

                  });

               });

             </ script >

再加上自定义的scss样式:

#wd-menu {

    .mm-panels > .mm-panel : after , .mm-panels > .mm-panel : before {

        height : 0 ;

    }

    .mm-panels > .mm-panel {

        padding : 0 ;

    }

    .m-login {

            height : 12 rem ;

            background : url ( .. /images/ menu /m-loginBg .png ) no-repeat top center ;

            background-size : cover ;

            color : #fff ;

            padding-top : 2.2 rem ;

            padding-left : 2 rem ;

            a {

                height : 5 rem ;

                display : block ;

                background : url ( .. /images/ menu /icon-mifeng .png ) no-repeat left center ;

                background-size : 5 rem ;

                color : #fff ;

                padding-left : 6 rem ;

                em {

                    display : block ;

                    font-style : normal ;

                    font-size : 1.84 rem ;

                    font-weight : bold ;

                }

            }

    }

    .mm-nolistview {

        margin-top : - 1.6 rem ;

        padding-left : 2 rem ;

        li {

            padding : .65rem 0 ;

            a {

                display : block ;

                color : #333 ;

                font-size : 1.64 rem ;

                height : 2.4 rem ;

                line-height : 2.4 rem ;

                background : url ( .. /images/ menu /icon-indexp .png ) no-repeat left center ;

                background-size : 2.2 rem ;

                padding-left : 3.8 rem ;

                padding-top : .3rem ;

            }

        }

        li .turn-news {

            a {

                background : url ( .. /images/ menu /icon-news .png ) no-repeat left center ;

                background-size : 2 rem ;               

            }

        }

        li .turn-licai {

            a {

                background : url ( .. /images/ menu /icon-licai .png ) no-repeat left center ;

                background-size : 2 rem ;               

            }

        }

        li .turn-zixun {

            a {

                background : url ( .. /images/ menu /icon-zixun .png ) no-repeat left center ;

                background-size : 2.2 rem ;               

            }

        }

        li .turn-special {

            a {

                background : url ( .. /images/ menu /icon-special .png ) no-repeat left center ;

                background-size : 2 rem ;               

            }

        }

        li .turn-hot {

            a {

                background : url ( .. /images/ menu /icon-hots .png ) no-repeat left center ;

                background-size : 2.2 rem ;               

            }

        }

        li .turn-joke {

            a {

                background : url ( .. /images/ menu /icon-joke .png ) no-repeat left center ;

                background-size : 2 rem ;               

            }

        }

        li .turn-answer {

            a {

                background : url ( .. /images/ menu /icon-answer .png ) no-repeat left center ;

                background-size : 2.2 rem ;               

            }

        }

        li .turn-forum {

            a {

                background : url ( .. /images/ menu /icon-forum .png ) no-repeat left center ;

                background-size : 2.2 rem ;               

            }

        }

    }

}

@media only screen and ( max-width : 320 px ) {

        #wd-menu .m-login {

            height : 10 rem ;

        }

        #wd-menu .mm-nolistview {

        }

        #wd-menu .mm-nolistview li {

                padding : .4rem 0 ;

        }

       

}

实现后的效果，额哪里咨询对应的图片不是很对

不过这个插件能快速实现开发侧栏而且是多样化的所以记录了一下希望对其他遇到相似问题的人亦有用。

啊哈结尾要发一下牢骚。。。