Skip to content

Instantly share code, notes, and snippets.

@jehoshua02

jehoshua02/index.html

Created March 27, 2015 19:30
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save jehoshua02/c8a47d4193a5a73314c8 to your computer and use it in GitHub Desktop.
Save jehoshua02/c8a47d4193a5a73314c8 to your computer and use it in GitHub Desktop.
Download ZIP
DDM Menu Prototype // source http://jsbin.com/dapupo/1
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery.min.js"></script>
<link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet" type="text/css" />
<script src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<link href="http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no">
<title>DDM Menu Prototype</title>
<style>
/* decorative styles, irrelevant to menu */
*, *:before, *:after {
-webkit-box-sizing: inherit;
-moz-box-sizing: inherit;
box-sizing: inherit;
}
html {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
body.menu-open .header > .inner {
left: 85%;
}
body {
margin: 0;
padding: 0;
}
body > .container > .content {
padding: 0 15px;
}
.header > .inner {
position: fixed;
top: 0;
left: 0;
z-index: 100;
background-color: #0b162f;
color: #fff;
width: 100%;
padding: 0 20px;
-webkit-transition: left .3s;
transition: left .3s;
height: 40px;
}
.header > .reserved {
height: 40px;
}
.header h1 {
display: inline-block;
width: auto;
font-size: 2em;
margin: 0;
margin-left: 20px;
line-height: 40px;
}
.menu > .inner {
color: #fff;
background-color: #333;
}
.menu .head {
background-color: #0b162f;
padding: 0 20px;
line-height: 40px;
font-size: 2em;
}
.menu .body {
padding-bottom: 20px;
}
.menu ul {
list-style-type: none;
padding: 0;
margin: 0;
}
.menu li {
padding: 10px 20px;
font-size: 1.5em;
border-bottom: 1px solid rgba(0,0,0,0.2);
}
.fa-ul {
position: relative;
z-index: -1;
}
.fa-check {
color: green;
}
.fa-times {
color: red;
}
.fa-question {
color: blue;
}
</style>
<style id="jsbin-css">
html, body {
height: 100%;
width: 100%;
}
body.menu-open {
overflow: hidden;
}
body > .container {
padding: 0;
width: 100%;
overflow-x: hidden;
}
body > .container > .content {
width: 100%;
position: relative;
left: 0;
-webkit-transition: left 0.3s;
transition: left 0.3s;
}
body.menu-open > .container > .content {
left: 85%;
}
.menu {
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
width: 85%;
height: 100%;
position: fixed;
top: 0;
left: -85%;
-webkit-transition: left 0.3s;
transition: left 0.3s;
overflow: auto;
-webkit-overflow-scrolling: touch;
padding-right: 0;
}
.menu.menu-open {
padding-right: 15%;
left: 0;
}
.menu > .inner {
min-height: 100%;
}
</style>
</head>
<body>
<div class="header">
<div class="inner">
<i class="fa fa-bars fa-2x menu-toggle"></i>
<h1>Menu Demo</h1>
</div>
<div class="reserved"></div>
</div>
<div class="container">
<div class="content">
<div class="menu">
<div class="inner">
<div class="head">
Menu
</div>
<div class="body">
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
<li>Item 6</li>
<li>Item 7</li>
<li>Item 8</li>
<li>Item 9</li>
<li>Item 10</li>
<li>Item 11</li>
<li>Item 12</li>
<li>Item 13</li>
<li>Item 14</li>
<li>Item 15</li>
<li>Item 16</li>
<li>Item 17</li>
<li>Item 18</li>
<li>Item 19</li>
<li>Item 20</li>
</ul>
</div>
</div>
</div>
<h3>Requirements</h3>
<ul class="fa-ul">
<li><i class="fa-li fa fa-check"></i>Push the page over.</li>
<li><i class="fa-li fa fa-check"></i>Smooth animation.</li>
<li><i class="fa-li fa fa-check"></i>Disable page scrolling, vertical and horizontal, when open.</li>
<li><i class="fa-li fa fa-check"></i>Maintain page scroll position through opening and closing.</li>
<li><i class="fa-li fa fa-check"></i>Must play well with fixed position elements on screen.</li>
<li><i class="fa-li fa fa-check"></i>Reset scroll within the menu to top when opening a second time.</li>
<li><i class="fa-li fa fa-check"></i>Click outside to close (clicks should not trigger anything on the page, just close the menu).</li>
<li><i class="fa-li fa fa-check"></i>Menu scrolls independent of page.</li>
<li><i class="fa-li fa fa-check"></i>Smooth scrolling.</li>
<li><i class="fa-li fa fa-check"></i>Needs to be easy to pop back into page</li>
</ul>
<h3>Issues</h3>
<ul class="fa-ul">
<li><i class="fa-li fa fa-times"></i>IE8: scrollbar detached from menu.</li>
<li><i class="fa-li fa fa-times"></i>Background color on menu doesn't extend into overscroll area.</li>
<li><i class="fa-li fa fa-times"></i>Header moves separately from page.</li>
<li><i class="fa-li fa fa-times"></i>Not using BEM classes.</li>
<li><i class="fa-li fa fa-times"></i>Shaded overlay on menu open.</li>
<li><i class="fa-li fa fa-times"></i>Public interface doesn't match current ddm-menu version.</li>
<li><i class="fa-li fa fa-times"></i>Android 2.3.5 Stock Browser: Menu not scrollable (But Firefox works perfect? Go figure).</li>
</ul>
<h3>Tested Browsers</h3>
<h4>Desktop</h4>
<ul class="fa-ul">
<li><i class="fa-li fa fa-check"></i>Safari</li>
<li><i class="fa-li fa fa-check"></i>Chrome</li>
<li><i class="fa-li fa fa-check"></i>Firefox</li>
<li><i class="fa-li fa fa-check"></i>IE8, Windows XP</li>
<li><i class="fa-li fa fa-check"></i>IE11</li>
</ul>
<h4>iPhone 6 Plus</h4>
<ul class="fa-ul">
<li><i class="fa-li fa fa-check"></i>Safari</li>
<li><i class="fa-li fa fa-check"></i>Chrome</li>
</ul>
<h4>Windows Mobile 8.1</h4>
<ul class="fa-ul">
<li><i class="fa-li fa fa-check"></i>Stock</li>
</ul>
<h4>Android 2.3.5</h4>
<ul class="fa-ul">
<li><i class="fa-li fa fa-check"></i>Stock</li>
<li><i class="fa-li fa fa-check"></i>Firefox</li>
</ul>
<h4>Android 5.0.1</h4>
<ul class="fa-ul">
<li><i class="fa-li fa fa-check"></i>Chrome</li>
</ul>
<h4>iPhone 4s</h4>
<ul class="fa-ul">
<li><i class="fa-li fa fa-check"></i>Safari</li>
</ul>
<h4>Android 4.0</h4>
<ul class="fa-ul">
<li><i class="fa-li fa fa-check"></i>Stock</li>
</ul>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus congue porta felis non fringilla. Etiam nisl turpis, volutpat ut ipsum id, semper ornare velit. Aliquam non lectus rhoncus, laoreet nisl eget, elementum nisi. Nullam diam ligula, faucibus quis orci rhoncus, blandit facilisis odio. Curabitur iaculis convallis felis ut iaculis. Etiam ut orci ullamcorper ligula elementum elementum vel at odio. Pellentesque feugiat lorem leo, non interdum nisl tristique nec. Suspendisse iaculis urna non convallis
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus congue porta felis non fringilla. Etiam nisl turpis, volutpat ut ipsum id, semper ornare velit. Aliquam non lectus rhoncus, laoreet nisl eget, elementum nisi. Nullam diam ligula, faucibus quis orci rhoncus, blandit facilisis odio. Curabitur iaculis convallis felis ut iaculis. Etiam ut orci ullamcorper ligula elementum elementum vel at odio. Pellentesque feugiat lorem leo, non interdum nisl tristique nec. Suspendisse iaculis urna non convallis
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus congue porta felis non fringilla. Etiam nisl turpis, volutpat ut ipsum id, semper ornare velit. Aliquam non lectus rhoncus, laoreet nisl eget, elementum nisi. Nullam diam ligula, faucibus quis orci rhoncus, blandit facilisis odio. Curabitur iaculis convallis felis ut iaculis. Etiam ut orci ullamcorper ligula elementum elementum vel at odio. Pellentesque feugiat lorem leo, non interdum nisl tristique nec. Suspendisse iaculis urna non convallis
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus congue porta felis non fringilla. Etiam nisl turpis, volutpat ut ipsum id, semper ornare velit. Aliquam non lectus rhoncus, laoreet nisl eget, elementum nisi. Nullam diam ligula, faucibus quis orci rhoncus, blandit facilisis odio. Curabitur iaculis convallis felis ut iaculis. Etiam ut orci ullamcorper ligula elementum elementum vel at odio. Pellentesque feugiat lorem leo, non interdum nisl tristique nec. Suspendisse iaculis urna non convallis
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus congue porta felis non fringilla. Etiam nisl turpis, volutpat ut ipsum id, semper ornare velit. Aliquam non lectus rhoncus, laoreet nisl eget, elementum nisi. Nullam diam ligula, faucibus quis orci rhoncus, blandit facilisis odio. Curabitur iaculis convallis felis ut iaculis. Etiam ut orci ullamcorper ligula elementum elementum vel at odio. Pellentesque feugiat lorem leo, non interdum nisl tristique nec. Suspendisse iaculis urna non convallis
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus congue porta felis non fringilla. Etiam nisl turpis, volutpat ut ipsum id, semper ornare velit. Aliquam non lectus rhoncus, laoreet nisl eget, elementum nisi. Nullam diam ligula, faucibus quis orci rhoncus, blandit facilisis odio. Curabitur iaculis convallis felis ut iaculis. Etiam ut orci ullamcorper ligula elementum elementum vel at odio. Pellentesque feugiat lorem leo, non interdum nisl tristique nec. Suspendisse iaculis urna non convallis
</p>
<p>Fin</p>
</div>
</div>
<script>
$(function () {
var menu = new Menu($('.menu'));
menu.addToggle($('.menu .head'));
menu.addToggle($('.header .fa-bars'));
});
</script>
<script id="jsbin-javascript">
var Menu = (function () {
var Menu = function ($element) {
this.$element = $element;
this.$toggles = [];
this.isOpen = function () {
return this.$element.hasClass('menu-open');
};
this.addToggle = function ($toggle) {
var menu = this;
menu.$toggles.push($toggle);
$toggle.on('click', function () {
if (menu.isOpen()) {
$element.trigger('close');
} else {
$element.trigger('open');
}
});
};
/* events */
$element.on('open', function () {
$element.scrollTop(0);
$element.addClass('menu-open');
$('body').addClass('menu-open');
});
$element.on('close', function () {
$element.removeClass('menu-open');
$('body').removeClass('menu-open');
});
$element.on('click', function (event) {
if (event.target === $element.get(0)) {
$element.trigger('close');
}
});
$element.on('touchstart', function (event) {
var scrollTop = $element.scrollTop();
var minScrollTop = 1;
var maxScrollTop = $element.get(0).scrollHeight - $element.height() - 1;
if (scrollTop < minScrollTop) {
$element.scrollTop(minScrollTop);
} else if (scrollTop > maxScrollTop) {
$element.scrollTop(maxScrollTop);
}
});
};
return Menu;
})();
</script>
<script id="jsbin-source-html" type="text/html"><!DOCTYPE html>
<html>
<head>
<script src="//code.jquery.com/jquery.min.js"><\/script>
<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/css/bootstrap-combined.min.css" rel="stylesheet" type="text/css" />
<script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.2/js/bootstrap.min.js"><\/script>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
<script src="//code.jquery.com/jquery-1.11.1.min.js"><\/script>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, user-scalable=no">
<title>DDM Menu Prototype</title>
<style>
/* decorative styles, irrelevant to menu */
*, *:before, *:after {
-webkit-box-sizing: inherit;
-moz-box-sizing: inherit;
box-sizing: inherit;
}
html {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
body.menu-open .header > .inner {
left: 85%;
}
body {
margin: 0;
padding: 0;
}
body > .container > .content {
padding: 0 15px;
}
.header > .inner {
position: fixed;
top: 0;
left: 0;
z-index: 100;
background-color: #0b162f;
color: #fff;
width: 100%;
padding: 0 20px;
-webkit-transition: left .3s;
transition: left .3s;
height: 40px;
}
.header > .reserved {
height: 40px;
}
.header h1 {
display: inline-block;
width: auto;
font-size: 2em;
margin: 0;
margin-left: 20px;
line-height: 40px;
}
.menu > .inner {
color: #fff;
background-color: #333;
}
.menu .head {
background-color: #0b162f;
padding: 0 20px;
line-height: 40px;
font-size: 2em;
}
.menu .body {
padding-bottom: 20px;
}
.menu ul {
list-style-type: none;
padding: 0;
margin: 0;
}
.menu li {
padding: 10px 20px;
font-size: 1.5em;
border-bottom: 1px solid rgba(0,0,0,0.2);
}
.fa-ul {
position: relative;
z-index: -1;
}
.fa-check {
color: green;
}
.fa-times {
color: red;
}
.fa-question {
color: blue;
}
</style>
</head>
<body>
<div class="header">
<div class="inner">
<i class="fa fa-bars fa-2x menu-toggle"></i>
<h1>Menu Demo</h1>
</div>
<div class="reserved"></div>
</div>
<div class="container">
<div class="content">
<div class="menu">
<div class="inner">
<div class="head">
Menu
</div>
<div class="body">
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
<li>Item 6</li>
<li>Item 7</li>
<li>Item 8</li>
<li>Item 9</li>
<li>Item 10</li>
<li>Item 11</li>
<li>Item 12</li>
<li>Item 13</li>
<li>Item 14</li>
<li>Item 15</li>
<li>Item 16</li>
<li>Item 17</li>
<li>Item 18</li>
<li>Item 19</li>
<li>Item 20</li>
</ul>
</div>
</div>
</div>
<h3>Requirements</h3>
<ul class="fa-ul">
<li><i class="fa-li fa fa-check"></i>Push the page over.</li>
<li><i class="fa-li fa fa-check"></i>Smooth animation.</li>
<li><i class="fa-li fa fa-check"></i>Disable page scrolling, vertical and horizontal, when open.</li>
<li><i class="fa-li fa fa-check"></i>Maintain page scroll position through opening and closing.</li>
<li><i class="fa-li fa fa-check"></i>Must play well with fixed position elements on screen.</li>
<li><i class="fa-li fa fa-check"></i>Reset scroll within the menu to top when opening a second time.</li>
<li><i class="fa-li fa fa-check"></i>Click outside to close (clicks should not trigger anything on the page, just close the menu).</li>
<li><i class="fa-li fa fa-check"></i>Menu scrolls independent of page.</li>
<li><i class="fa-li fa fa-check"></i>Smooth scrolling.</li>
<li><i class="fa-li fa fa-check"></i>Needs to be easy to pop back into page</li>
</ul>
<h3>Issues</h3>
<ul class="fa-ul">
<li><i class="fa-li fa fa-times"></i>IE8: scrollbar detached from menu.</li>
<li><i class="fa-li fa fa-times"></i>Background color on menu doesn't extend into overscroll area.</li>
<li><i class="fa-li fa fa-times"></i>Header moves separately from page.</li>
<li><i class="fa-li fa fa-times"></i>Not using BEM classes.</li>
<li><i class="fa-li fa fa-times"></i>Shaded overlay on menu open.</li>
<li><i class="fa-li fa fa-times"></i>Public interface doesn't match current ddm-menu version.</li>
<li><i class="fa-li fa fa-times"></i>Android 2.3.5 Stock Browser: Menu not scrollable (But Firefox works perfect? Go figure).</li>
</ul>
<h3>Tested Browsers</h3>
<h4>Desktop</h4>
<ul class="fa-ul">
<li><i class="fa-li fa fa-check"></i>Safari</li>
<li><i class="fa-li fa fa-check"></i>Chrome</li>
<li><i class="fa-li fa fa-check"></i>Firefox</li>
<li><i class="fa-li fa fa-check"></i>IE8, Windows XP</li>
<li><i class="fa-li fa fa-check"></i>IE11</li>
</ul>
<h4>iPhone 6 Plus</h4>
<ul class="fa-ul">
<li><i class="fa-li fa fa-check"></i>Safari</li>
<li><i class="fa-li fa fa-check"></i>Chrome</li>
</ul>
<h4>Windows Mobile 8.1</h4>
<ul class="fa-ul">
<li><i class="fa-li fa fa-check"></i>Stock</li>
</ul>
<h4>Android 2.3.5</h4>
<ul class="fa-ul">
<li><i class="fa-li fa fa-check"></i>Stock</li>
<li><i class="fa-li fa fa-check"></i>Firefox</li>
</ul>
<h4>Android 5.0.1</h4>
<ul class="fa-ul">
<li><i class="fa-li fa fa-check"></i>Chrome</li>
</ul>
<h4>iPhone 4s</h4>
<ul class="fa-ul">
<li><i class="fa-li fa fa-check"></i>Safari</li>
</ul>
<h4>Android 4.0</h4>
<ul class="fa-ul">
<li><i class="fa-li fa fa-check"></i>Stock</li>
</ul>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus congue porta felis non fringilla. Etiam nisl turpis, volutpat ut ipsum id, semper ornare velit. Aliquam non lectus rhoncus, laoreet nisl eget, elementum nisi. Nullam diam ligula, faucibus quis orci rhoncus, blandit facilisis odio. Curabitur iaculis convallis felis ut iaculis. Etiam ut orci ullamcorper ligula elementum elementum vel at odio. Pellentesque feugiat lorem leo, non interdum nisl tristique nec. Suspendisse iaculis urna non convallis
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus congue porta felis non fringilla. Etiam nisl turpis, volutpat ut ipsum id, semper ornare velit. Aliquam non lectus rhoncus, laoreet nisl eget, elementum nisi. Nullam diam ligula, faucibus quis orci rhoncus, blandit facilisis odio. Curabitur iaculis convallis felis ut iaculis. Etiam ut orci ullamcorper ligula elementum elementum vel at odio. Pellentesque feugiat lorem leo, non interdum nisl tristique nec. Suspendisse iaculis urna non convallis
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus congue porta felis non fringilla. Etiam nisl turpis, volutpat ut ipsum id, semper ornare velit. Aliquam non lectus rhoncus, laoreet nisl eget, elementum nisi. Nullam diam ligula, faucibus quis orci rhoncus, blandit facilisis odio. Curabitur iaculis convallis felis ut iaculis. Etiam ut orci ullamcorper ligula elementum elementum vel at odio. Pellentesque feugiat lorem leo, non interdum nisl tristique nec. Suspendisse iaculis urna non convallis
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus congue porta felis non fringilla. Etiam nisl turpis, volutpat ut ipsum id, semper ornare velit. Aliquam non lectus rhoncus, laoreet nisl eget, elementum nisi. Nullam diam ligula, faucibus quis orci rhoncus, blandit facilisis odio. Curabitur iaculis convallis felis ut iaculis. Etiam ut orci ullamcorper ligula elementum elementum vel at odio. Pellentesque feugiat lorem leo, non interdum nisl tristique nec. Suspendisse iaculis urna non convallis
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus congue porta felis non fringilla. Etiam nisl turpis, volutpat ut ipsum id, semper ornare velit. Aliquam non lectus rhoncus, laoreet nisl eget, elementum nisi. Nullam diam ligula, faucibus quis orci rhoncus, blandit facilisis odio. Curabitur iaculis convallis felis ut iaculis. Etiam ut orci ullamcorper ligula elementum elementum vel at odio. Pellentesque feugiat lorem leo, non interdum nisl tristique nec. Suspendisse iaculis urna non convallis
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus congue porta felis non fringilla. Etiam nisl turpis, volutpat ut ipsum id, semper ornare velit. Aliquam non lectus rhoncus, laoreet nisl eget, elementum nisi. Nullam diam ligula, faucibus quis orci rhoncus, blandit facilisis odio. Curabitur iaculis convallis felis ut iaculis. Etiam ut orci ullamcorper ligula elementum elementum vel at odio. Pellentesque feugiat lorem leo, non interdum nisl tristique nec. Suspendisse iaculis urna non convallis
</p>
<p>Fin</p>
</div>
</div>
<script>
$(function () {
var menu = new Menu($('.menu'));
menu.addToggle($('.menu .head'));
menu.addToggle($('.header .fa-bars'));
});
<\/script>
</body>
</html></script>
<script id="jsbin-source-css" type="text/css">html, body {
height: 100%;
width: 100%;
}
body.menu-open {
overflow: hidden;
}
body > .container {
padding: 0;
width: 100%;
overflow-x: hidden;
}
body > .container > .content {
width: 100%;
position: relative;
left: 0;
-webkit-transition: left 0.3s;
transition: left 0.3s;
}
body.menu-open > .container > .content {
left: 85%;
}
.menu {
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
width: 85%;
height: 100%;
position: fixed;
top: 0;
left: -85%;
-webkit-transition: left 0.3s;
transition: left 0.3s;
overflow: auto;
-webkit-overflow-scrolling: touch;
padding-right: 0;
}
.menu.menu-open {
padding-right: 15%;
left: 0;
}
.menu > .inner {
min-height: 100%;
}
</script>
<script id="jsbin-source-javascript" type="text/javascript">var Menu = (function () {
var Menu = function ($element) {
this.$element = $element;
this.$toggles = [];
this.isOpen = function () {
return this.$element.hasClass('menu-open');
};
this.addToggle = function ($toggle) {
var menu = this;
menu.$toggles.push($toggle);
$toggle.on('click', function () {
if (menu.isOpen()) {
$element.trigger('close');
} else {
$element.trigger('open');
}
});
};
/* events */
$element.on('open', function () {
$element.scrollTop(0);
$element.addClass('menu-open');
$('body').addClass('menu-open');
});
$element.on('close', function () {
$element.removeClass('menu-open');
$('body').removeClass('menu-open');
});
$element.on('click', function (event) {
if (event.target === $element.get(0)) {
$element.trigger('close');
}
});
$element.on('touchstart', function (event) {
var scrollTop = $element.scrollTop();
var minScrollTop = 1;
var maxScrollTop = $element.get(0).scrollHeight - $element.height() - 1;
if (scrollTop < minScrollTop) {
$element.scrollTop(minScrollTop);
} else if (scrollTop > maxScrollTop) {
$element.scrollTop(maxScrollTop);
}
});
};
return Menu;
})();
</script></body>
</html>
Raw
jsbin.dapupo.css
html, body {
height: 100%;
width: 100%;
}
body.menu-open {
overflow: hidden;
}
body > .container {
padding: 0;
width: 100%;
overflow-x: hidden;
}
body > .container > .content {
width: 100%;
position: relative;
left: 0;
-webkit-transition: left 0.3s;
transition: left 0.3s;
}
body.menu-open > .container > .content {
left: 85%;
}
.menu {
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
width: 85%;
height: 100%;
position: fixed;
top: 0;
left: -85%;
-webkit-transition: left 0.3s;
transition: left 0.3s;
overflow: auto;
-webkit-overflow-scrolling: touch;
padding-right: 0;
}
.menu.menu-open {
padding-right: 15%;
left: 0;
}
.menu > .inner {
min-height: 100%;
}
Raw
jsbin.dapupo.js
var Menu = (function () {
var Menu = function ($element) {
this.$element = $element;
this.$toggles = [];
this.isOpen = function () {
return this.$element.hasClass('menu-open');
};
this.addToggle = function ($toggle) {
var menu = this;
menu.$toggles.push($toggle);
$toggle.on('click', function () {
if (menu.isOpen()) {
$element.trigger('close');
} else {
$element.trigger('open');
}
});
};
/* events */
$element.on('open', function () {
$element.scrollTop(0);
$element.addClass('menu-open');
$('body').addClass('menu-open');
});
$element.on('close', function () {
$element.removeClass('menu-open');
$('body').removeClass('menu-open');
});
$element.on('click', function (event) {
if (event.target === $element.get(0)) {
$element.trigger('close');
}
});
$element.on('touchstart', function (event) {
var scrollTop = $element.scrollTop();
var minScrollTop = 1;
var maxScrollTop = $element.get(0).scrollHeight - $element.height() - 1;
if (scrollTop < minScrollTop) {
$element.scrollTop(minScrollTop);
} else if (scrollTop > maxScrollTop) {
$element.scrollTop(maxScrollTop);
}
});
};
return Menu;
})();
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment