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

Question

我在Foundation 6.2中使用了mmenu.js，并且想要防止在大屏幕尺寸上mmenu的画布外默认菜单显示。基础的可见性类用于隐藏大屏幕的画布外菜单，其中画布上的菜单占据了该位置。但是，如果在将浏览器窗口调整为较大的屏幕大小之前关闭画布菜单未关闭，则会在菜单的放置位置保留空白区域。有没有办法阻止非帆布API完全以大屏幕尺寸显示？

Answer 1

找到了一个有用的解决方案，使用window.matchMedia解释Craig Butler在http://www.sitepoint.com/javascript-media-queries/。这会导致空白窗口空间关闭（或者更确切地说，使用默认的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(); 
       } 
      } 
     });