使mmenu.js在宽屏上打开，也可以关闭

Question

我正在用mmenu.js制作菜单，让它在宽屏上打开，在中端到移动端关闭。但我也希望，在宽屏上，能够通过切换按钮关闭它。

现在，你只能在手机上关闭它。

这是一个fiddle

        $(function() {
            var $menu = $('nav#menu'),
                $html = $('html, body');

            $menu.mmenu({
                extensions: ["widescreen", "theme-dark"]
            });

            var $anchor = false;
            $menu.find( 'li > a' ).on(
                'click',
                function( e )
                {
                    $anchor = $(this);
                }
            );

            var api = $menu.data( 'mmenu' );
            api.bind( 'closed',
                function()
                {
                    if ( $anchor )
                    {
                        var href = $anchor.attr( 'href' );
                        $anchor = false;

                        //  if the clicked link is linked to an anchor, scroll the page to that anchor 
                        if ( href.slice( 0, 1 ) == '#' )
                        {
                            $html.animate({
                                scrollTop: $( href ).offset().top
                            }); 
                        }
                    }
                }
            );
        });

Answer 1

您可以创建一个看起来像mmenu按钮的假按钮。

<a href="#fake-bttn"></a>

然后添加jquery来切换#my-mmenu容器和.my page容器上的类。

$("#fake-bttn").click(function(){
    $("my-mmenu").toggleClass("close");
    $("div.mm-page").toggleClass("close");  
});

然后将以下内容添加到mmenu的widesceen.css中。

.mm-slideout {
  -webkit-transition: width 1s; /* Safari */
  transition: width 1s;
}
.mm-page.mm-slideout.close {
  width: 100% !important;
  margin-left: 0% !important;
}
.mm-menu.mm-widescreen {
  -webkit-transition: width 1s; /* Safari */
  transition: width 1s;
  min-width: 0% !important;
}
.mm-menu.mm-widescreen.close {
  min-width: 0% !important;
  width: 0% !important;
}

我还必须向widescreen.css中的. my页面容器添加一个浮动

.mm-page { float:right }

然后根据与widescreen.css相同的媒体查询值隐藏该按钮。