如何讓mmenu大小變得靈活？

我有一個mmenu，我需要它的大小在小屏幕上或瀏覽器大小變爲小尺寸時更改爲全屏。我嘗試閱讀mmenu的教程，並找到clone解決方案，但我完全不理解它。當我嘗試使用它並調整瀏覽器大小時，當瀏覽器達到菜單寬度的20％以下時，我的菜單就消失了。這裏是我的代碼沒有克隆位。如何讓mmenu大小變得靈活？

<div> 
    <a href="#welcomeMenu">Open the menu</a> 

    <nav id="welcomeMenu"> 
     <div> 
      <ul> 
       <li> 
        <a href="#"><span class="glyphicon glyphicon-pencil"></span> Sign up</a> 
       </li> 
       <li> 
        <a href="#"><span class="glyphicon glyphicon-play"></span> Enter</a> 
        <ul class="vertical"> 
         <li><a href="#"><span class="glyphicon glyphicon-log-in"></span> Log in</a></li> 
         <li><a href="#"><span class="glyphicon glyphicon-user"></span> Continue as guest</a></li> 
        </ul> 
       </li> 
      </ul>    
     </div>   
    </nav>   
</div>

我的腳本：

<script type="text/javascript"> 
     $(document).ready(function() { 

     $(document).ready(function() { 
      $("#welcomeMenu").mmenu({ 
      }); 
     }); 
    }); 
</script>

請充分解釋你的答案。

來源

2016-01-25 MJH

在項目中包含bootstrap CSS和JS文件。您可以下載文件here。

<title></title> 
<link href="path to/jquery.mmenu.all.css" rel="stylesheet" /> 
<link href="path to/bootstrap.css" rel="stylesheet" /> 
<script src="path to/jquery-1.11.3.min.js"></script> 
<script src="path to/jquery.mmenu.all.min.js"></script> 
<script src="path to/bootstrap.js"></script>

在引導程序中，屏幕被分成12個相等的列。在Bootstrap網站上閱讀更多關於此的信息。現在把整個頁面內容放在一個帶有行類的div中。

<body> 
    <div class = "row"> 
    ... 
    </div> 
</body>

在自舉的類XS，SM，MD，LG定義不同的屏幕尺寸，從超小到大。例如：

<div class = "col-xs-3"></div>

將使格爲3列寬超小屏幕（或瀏覽器）上。如果沒有添加其他類，則在任何大於xs的屏幕尺寸上，div將爲3列寬。

下面的代碼將使菜單12列寬在XS屏幕，並從SM任何屏幕上，以及較大的它將5列寬。

<div class="row"> 
    <a href="#welcomeMenu">Open the menu</a> 

    <nav id="welcomeMenu" class = "col-xs-12 col-sm-5"> 
     <div> 
      <ul> 
       <li> 
        <a href="#"><span class="glyphicon glyphicon-pencil"></span> Sign up</a> 
       </li> 
       <li> 
        <a href="#"><span class="glyphicon glyphicon-play"></span> Enter</a> 
        <ul class="vertical"> 
         <li><a href="#"><span class="glyphicon glyphicon-log-in"></span> Log in</a></li> 
         <li><a href="#"><span class="glyphicon glyphicon-user"></span> Continue as guest</a></li> 
        </ul> 
       </li> 
      </ul>    
     </div>   
    </nav>   
</div>

來源

2016-01-25 18:32:20 MJH

如何讓mmenu大小變得靈活？

回答

相關問題