让 mmenu.js 在宽屏上打开，也可以关闭答案

【问题标题】：Make mmenu.js open on widescreen and can also be closed让 mmenu.js 在宽屏上打开，也可以关闭
【发布时间】：2015-07-08 09:31:44
【问题描述】：

我正在使用 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
                            }); 
                        }
                    }
                }
            );
        });

【问题讨论】：

标签： javascript jquery mmenu

【解决方案1】：

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

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

然后添加 jquery 以切换 #my-mmenu 容器和 .mm-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 中的 .mm-page 容器中添加一个浮点数

.mm-page { float:right }

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

【讨论】：