Isabel Inc Isabel Inc - 4 months ago 28
jQuery Question

Jquery mmenu glitchy animation and is overlapping instead of pushing content

I've implemented the jquery mmenu (http://mmenu.frebsite.nl/) and everything seems to be working great except that the animation is a little glitchy.

In the mmenu demo the content is pushed to the right by the menu and my menu overlaps the content. I suspect this is the reason for the animation problem as well. I've tried to debug this and looked around but I cant seem to find anything. The cause could be anything so im providing a link to my development site to examine the code.

Here is the important bits of code related to the implementation:

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


I've included the css of the html and the body because its relevant.

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


Thanks for your time and have a great day.

Answer

I had the same problem and noticed that you have to put all your content inside a <div> like this:

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

This fixed the problem for me.

You can read more about it here:

Comments