獲取jQuery mmenu以在768px以上的普通文檔流中顯示

Question

我正在嘗試使mmenu在特定屏幕寬度以上時顯示在正常文檔流中，而在該寬度以下顯示時即顯示為開箱即用。 我遇到一個提到“克隆”的答案，盡管我不確定這意味着什么（是否只是使用不同的ID復制菜單？）...我有一個包含15頁站點的項目，非常適合，如果我能按我的意願使它工作！ 任何幫助將不勝感激！

我試過像這樣包裝函數（我的jQuery / javascript絕對不是我的強項！）：

$(document).ready(function($) {
  if($(window).width() < 768) {
        $("#menu").mmenu();
  }
});

HTML：

<nav id="menu">
    <ul>
        <li class="Selected"><a href="#">ONE</a></li>
        <li><a href="#">TWO</a></li>
        <li><a href="#">THREE</a></li>
    </ul>
</nav>

Answer 1

創建一個克隆（是的，更改其ID）會為您提供兩個帶有相同HTML的NAV。 在第一個NAV上觸發該插件，並使用CSS和媒體查詢將其顯示在移動網站中。 再次使用CSS和媒體查詢將其隱藏在桌面站點中。 反之亦然，使用CSS和媒體查詢在移動網站中隱藏第一個NAV並將其顯示在桌面網站中。

請注意，mmenu插件具有用於克隆菜單的內置選項，該菜單將自動在菜單中的所有ID前面加上“ mm-”：

$("#menu").mmenu({
   clone: true
});