Question

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

Answer 1

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

          $(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();
              }
            }
         });

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

1 个答案: