如何防止在大屏幕上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(); 
       } 
      } 
     });