Jquery mmenu 故障动画并且是重叠而不是推送内容答案

【问题标题】：Jquery mmenu glitchy animation and is overlapping instead of pushing contentJquery mmenu 故障动画并且是重叠而不是推送内容
【发布时间】：2015-07-22 05:21:18
【问题描述】：

我已经实现了 jquery mmenu (http://mmenu.frebsite.nl/)，一切似乎都很好，只是动画有点小故障。

在 mmenu 演示中，内容被菜单推送到右侧，我的菜单与内容重叠。我怀疑这也是动画问题的原因。我试图调试它并环顾四周，但我似乎找不到任何东西。原因可能是任何原因，因此我提供了指向我的开发站点的链接以检查代码。

以下是与实现相关的重要代码：

<nav id="mmenu" style="height:auto;z-index:999">
                    <ul>
                      <li><a href="/home"><b>Home</b></a></li>
                      <li><a href="/collections/all-saris-1"><b>Collections</b></a></li>
                      <li><span><b>Information</b></span>
                        <ul>
                          <li><a href="/pages/about-us">About Us</a></li>
                          <li><a href="/pages/privacy-policy">Privacy Policy</a></li>
                          <li><a href="/pages/returns-cancellations-refunds">Returns, Cancellations & Refunds</a></li>
                          <li><a href="/pages/shipping-delivery">Shipping & Delivery</a></li>
                          <li><a href="/pages/terms-and-conditions">Terms & Conditions</a></li>

                        </ul>
                      </li>
                      <li><a href="/cart"><b>Shopping Bag ({{ items_in_cart }})</b></a></li>
                      <li><a href="/account/login"><b>Login/ Register</b></a></li>

                    </ul>
                </nav>

 <script type="text/javascript">
         jQuery(document).ready(function( $ ) {
            $("#mmenu").mmenu({
               "extensions": [
                  "border-full",
                  "pageshadow",
                  "effect-slide-menu"
               ],
               "searchfield": {
                  "noResults": "Oops! No results found. Click for a detailed search",
                  "add": true,
                 "form":true
               },
               "navbar": {
                  "title": "Title"
               },
               "backButton": {
                 "close" : true
               },
               "navbars": [
                  {
                     "position": "top",
                     "content": [
                        "prev",
                        "title",
                        "close"
                     ]
                  }
               ]
            });
         });
      </script>

我已经包含了 html 和 body 的 css，因为它是相关的。

body {
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
    background-color: #FFF;
    overflow-x: hidden;
    }

感谢您的宝贵时间，祝您有美好的一天。

【问题讨论】：

到目前为止你做了什么？给出一些最小的代码示例。
对不起那只野狗。当我真的很沮丧并且不想发布代码时，我发布了这个问题。我已将相关代码添加到问题中。

标签： jquery html css mmenu

【解决方案1】：

我遇到了同样的问题，并注意到您必须将所有内容放入 <div> 中，如下所示：

<body>
  <div> <!-- the wrapper -->
    <div id="my-header">
       <nav id="mmenu">
          ...
       </nav>
    </div>
    <div id="my-content">
       ...
    </div>
    <div id="my-footer">
       ...
    </div>
  </div>
</body>

这解决了我的问题。

你可以阅读更多关于它的信息here:

【讨论】：

请把相关内容贴在这里