Jquery菜单故障动画和重叠，而不是推送内容

我已经实现了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的css和正文，因为它们是相关的。

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

谢谢你的时间，祝你有美好的一天。

我有同样的问题，并注意到你必须把你所有的内容在<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>

这为我解决了这个问题。

您可以在这里阅读更多信息:

相关内容

最新更新

热门标签：