Jquery mmenu 动画有问题并且重叠而不是推送内容

Question

我已经实现了 jquery mmenu (http://mmenu.frebsite.nl/)，除了动画有点问题外，一切似乎都运行良好。

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

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

<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 的 css 和正文，因为它是相关的。

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

感谢您的宝贵时间，祝您今天愉快。

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

Jquery mmenu 动画有问题并且重叠而不是推送内容

Jquery mmenu glitchy animation and is overlapping instead of pushing content

jquery

html

css

mmenu