如何使菜单大小灵活？答案

【问题标题】：how to make mmenu size flexible?如何使菜单大小灵活？
【发布时间】：2016-01-25 16:49:13
【问题描述】：

我有一个mmenu，我需要在小屏幕或浏览器大小更改为小尺寸时将其大小更改为全屏。我尝试阅读 mmenu 的教程，找到了clone 的解决方案，但我完全不明白。当我尝试使用它并调整浏览器大小时，当浏览器小于菜单宽度的 20% 时，我的菜单就消失了。这是我没有克隆位的代码。

<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>

请充分解释您的答案。

【问题讨论】：

注意：mmenu clone 方法会创建一个导航结构的副本并在其上初始化 mmenu，留下一个未改动的导航版本以在标准标题中使用。

标签： jquery html css mmenu

【解决方案1】：

在项目中包含引导 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 个相等的列。在引导站点中阅读有关此内容的更多信息。现在将整个页面内容放在一个带有行类的 div 中。

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

在引导程序中，xs、sm、md、lg 类定义了不同的屏幕尺寸，从 extra-small 到 large。例如：

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

将使 div 在超小屏幕（或浏览器）上为 3 列宽。如果没有添加其他类，则 div 在任何大于 xs 的屏幕尺寸上都是 3 列宽。

以下代码将在 xs 屏幕中使菜单 12 列 宽，并且在 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>

【讨论】：