如何防止 mmenu 在大屏幕上显示默认的画布外菜单

Question

我在 Foundation 6.2 中使用 mmenu.js，并希望防止 mmenu 的画布外默认菜单显示在大屏幕尺寸上。 Foundation 的可见性类用于隐藏大屏幕的画布外菜单，其中画布上的菜单接管。但是，如果在将浏览器窗口调整为大屏幕尺寸之前未关闭画布外菜单，则会在菜单所在的位置保留一个空白区域。有没有办法阻止画布外 API 完全以大屏幕尺寸显示？

Answer 1

使用 Craig Butler 在http://www.sitepoint.com/javascript-media-queries/ 解释的 window.matchMedia 找到了一个有用的解决方案。这会导致空白窗口空间关闭（或者更确切地说，使用默认的 mmenu 设置滑动关闭）并且浏览器内容在 1024 像素处扩展到全宽。

          $(document).ready(function() {            //Off canvas mmenu options
          $("#igreens").mmenu({

          navbar:{
                  title: ''
            }

            });
             var API = $("#igreens").data( "mmenu" );

            $("#nav-toggle").click(function() {
            API.open();

            });
                                                   // media query event handler
            if (matchMedia) {
                var mq = window.matchMedia("(min-width: 1024px)");
                mq.addListener(WidthChange);
                WidthChange(mq);
            }

            // media query change
            function WidthChange(mq) {
              if (mq.matches) {         
              API.close();                                   

              } else {                             // window width is less than 1024px
                mq.preventDefault();
              }
            }
         });