Question

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

请完整解释你的答案。

Answer 1

在项目中包含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>

在bootstrap中，屏幕分为12个相等的列。在bootstrap站点中阅读有关此内容的更多信息。现在把整个页面内容放在一个带有行类的div中。

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

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

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

将在超小屏幕（或浏览器）上将div设为3列宽。如果没有添加其他类，则在任何大于 xs 的屏幕尺寸上，div将为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>

如何使mmenu大小灵活？

1 个答案: