Navigation menu (hamburger) opens sideway jquery disabled
<body>
<!--This wrapping container is used to get the width of the whole content-->
<div id="container" style="margin-left: -1px;">
<!--The Hamburger Button in the Header-->
<header>
<div id="hamburger">
<div></div>
<div></div>
<div></div>
</div>
</header>
<!--The mobile navigation Markup hidden via css-->
<nav style="opacity: 0;">
<ul>
<li><a href="#">menuitem 1</a></li>
<li><a href="#">menuitem 2</a></li>
<li><a href="#">menuitem 3</a></li>
<li><a href="#">menuitem 4</a></li>
<li><a href="#">menuitem 5</a></li>
<li><a href="#">menuitem 6</a></li>
</ul>
</nav>
<!--The Layer that will be layed over the content
so that the content is unclickable while menu is shown-->
<div id="contentLayer" style="display: none;"></div>
<!--The content of the site-->
<div id="content" style="min-height: auto; width: auto;">
<h1>The Hamburger</h1>
<h2>A Mobile Menu Template</h2>
<p>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam
voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor
sit amet.
</p>
<p>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam
voluptua.
</p>
<p>
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam
voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor
sit amet.
</p>
<a href="https://github.com/ymc-thzi/mobile-menu-hamburger"><img style="position: absolute; top: 51px; right: 0; border: 0;" src="https://s3.amazonaws.com/github/ribbons/forkme_right_orange_ff7600.png" alt="Fork me on GitHub"></a>
</div>
</div>
</body>
<!-- /**
* hamburger.js
*
* Mobile Menu Hamburger
* =====================
* A hamburger menu for mobile websites
*
* Created by Thomas Zinnbauer YMC AG | http://www.ymc.ch
* Date: 21.05.13
*/
jQuery(document).ready(function () {
//Open the menu
jQuery("#hamburger").click(function () {
jQuery('#content').css('min-height', jQuery(window).height());
jQuery('nav').css('opacity', 1);
//set the width of primary content container -> content should not scale while animating
var contentWidth = jQuery('#content').width();
//set the content with the width that it has originally
jQuery('#content').css('width', contentWidth);
//display a layer to disable clicking and scrolling on the content while menu is shown
jQuery('#contentLayer').css('display', 'block');
//disable all scrolling on mobile devices while menu is shown
jQuery('#container').bind('touchmove', function (e) {
e.preventDefault()
});
//set margin for the whole container with a jquery UI animation
jQuery("#container").animate({"marginLeft": ["70%", 'easeOutExpo']}, {
duration: 700
});
});
//close the menu
jQuery("#contentLayer").click(function () {
//enable all scrolling on mobile devices when menu is closed
jQuery('#container').unbind('touchmove');
//set margin for the whole container back to original state with a jquery UI animation
jQuery("#container").animate({"marginLeft": ["-1", 'easeOutExpo']}, {
duration: 700,
complete: function () {
jQuery('#content').css('width', 'auto');
jQuery('#contentLayer').css('display', 'none');
jQuery('nav').css('opacity', 0);
jQuery('#content').css('min-height', 'auto');
}
});
});
}); -->