Skip to content

Instantly share code, notes, and snippets.

@jehoshua02

jehoshua02/index.html

Created March 27, 2015 19:29
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/3b97be17b31e6b12fbfc to your computer and use it in GitHub Desktop.
Save jehoshua02/3b97be17b31e6b12fbfc to your computer and use it in GitHub Desktop.
Download ZIP
DDM Menu Prototype // source http://jsbin.com/dapupo
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 {
margin: 0;
padding: 0;
}
.ddm-menu-container--open-left .header > .inner {
left: 85%;
}
.ddm-menu-container--open-right .header > .inner {
left: -85%;
}
.ddm-menu-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;
}
.my-menu {
background-color: #333;
}
.my-menu__inner {
color: #fff;
min-height: 100%;
}
.my-menu__head {
background-color: #0b162f;
padding: 0 20px;
line-height: 40px;
font-size: 2em;
}
.my-menu__body {
padding-bottom: 20px;
}
.my-menu ul {
list-style-type: none;
padding: 0;
margin: 0;
}
.my-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;
}
.menu-right-toggle {
position: absolute;
right: 20px;
top: 7px;
}
</style>
<style id="jsbin-css">
.ddm-menu-container {
padding: 0;
width: 100%;
overflow-x: hidden;
}
.ddm-menu-container__content {
width: 100%;
position: relative;
left: 0;
-webkit-transition: left 0.3s;
transition: left 0.3s;
}
.ddm-menu-container--open-left .ddm-menu-container__content {
left: 85%;
}
.ddm-menu-container--open-right .ddm-menu-container__content {
left: -85%;
}
.ddm-menu {
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
width: 85%;
height: 100%;
position: fixed;
z-index: -1;
top: 0;
left: -85%;
-webkit-transition: left 0.3s;
transition: left 0.3s;
overflow: auto;
-webkit-overflow-scrolling: touch;
padding-right: 0;
}
.ddm-menu--open {
left: 0;
z-index: 300;
}
.ddm-menu--right {
left: 100%;
}
.ddm-menu--open.ddm-menu--right {
left: 15%;
}
/* overlay to capture clicks */
.ddm-menu-container__overlay {
height: 100%;
width: 15%;
position: fixed;
top: 0;
left: 85%;
z-index: 200;
/* ie8 allows clicks to pass through transparent elements. Use transparent background image to trick ie8 */
/* inline png for rgba fallback generated from http://1x1px.me/000000-0.png and converted at http://webcodertools.com/imagetobase64converter */
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR4nGNiYAAAAAkAAxkR2eQAAAAASUVORK5CYII=) repeat;
display: none;
}
.ddm-menu-container--open-left .ddm-menu-container__overlay {
display: block;
}
.ddm-menu-container--open-right .ddm-menu-container__overlay {
display: block;
left: 0;
}
</style>
</head>
<body>
<div class="ddm-menu-container">
<div class="header">
<div class="inner">
<i id="left-menu-example-toggle" class="fa fa-bars fa-2x menu-left-toggle"></i>
<h1>Menu Demo</h1>
<i id="right-menu-example-toggle" class="fa fa-bars fa-2x menu-right-toggle"></i>
</div>
<div class="reserved"></div>
</div>
<div class="ddm-menu-container__content">
<br />
<button id="another-left-menu-example-toggle">Another Menu</button>
<div id="left-menu-example" class="ddm-menu my-menu">
<div class="my-menu__inner">
<div class="my-menu__head">
Left Menu
</div>
<div class="my-menu__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>
<div id="another-left-menu-example" class="ddm-menu my-menu">
<div class="my-menu__inner">
<div class="my-menu__head">
Another Left Menu
</div>
<div class="my-menu__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>
<div id="right-menu-example" class="ddm-menu ddm-menu--right my-menu">
<div class="my-menu__inner">
<div class="my-menu__head">
Right Menu
</div>
<div class="my-menu__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-times"></i>Disable vertical scrolling when open.</li>
<li><i class="fa-li fa fa-check"></i>Disable horizontal scrolling 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>
<li><i class="fa-li fa fa-check"></i>Option to position menu on the right</li>
<li><i class="fa-li fa fa-check"></i>Multiple menus on same page operate independently</li>
<li><i class="fa-li fa fa-check"></i>Option to teardown menu at any point</li>
</ul>
<h3>Issues</h3>
<ul class="fa-ul">
<li><i class="fa-li fa fa-times"></i>Answer backward compatibility questions.</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>Android 2.3.5 Stock Browser: Menu not scrollable (But Firefox on Android works perfect? Go figure).</li>
<li><i class="fa-li fa fa-check"></i><del>Background color on menu doesn't extend into overscroll area.</del></li>
<li><i class="fa-li fa fa-check"></i><del>Scrollbar detached from menu.</del></li>
<li><i class="fa-li fa fa-check"></i><del>Overlay on menu open to catch clicks.</del></li>
<li><i class="fa-li fa fa-check"></i><del>Public interface doesn't match current ddm-menu version (function call, event names, methods, namespaces).</del></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-times"></i>Stock</li>
</ul>
<h4>Android 2.3.5</h4>
<ul class="fa-ul">
<li><i class="fa-li fa fa-times"></i>Stock</li>
<li><i class="fa-li fa fa-times"></i>Firefox</li>
</ul>
<h4>Android 5.0.1</h4>
<ul class="fa-ul">
<li><i class="fa-li fa fa-times"></i>Chrome</li>
</ul>
<h4>iPhone 4s</h4>
<ul class="fa-ul">
<li><i class="fa-li fa fa-times"></i>Safari</li>
</ul>
<h4>Android 4.0</h4>
<ul class="fa-ul">
<li><i class="fa-li fa fa-times"></i>Stock</li>
</ul>
<h3>Teardown Menu</h3>
<p>DDM Menu has a teardown method that removes all ddm-menu styling and functionality.</p>
<div id="teardown-menu-example-buttons">
<button class="toggle">Open Teardown Menu</button>
<button class="initialize">Initialize</button>
<button class="teardown">Teardown</button>
</div>
<div id="teardown-menu-example" class="ddm-menu my-menu">
<div class="my-menu__inner">
<div class="my-menu__head">
Teardown Menu
</div>
<div class="my-menu__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>Dummy Content</h3>
<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>
// initialize left menu
$(function () {
var menu = ddm.menu($('#left-menu-example'));
menu.addToggles(
$('#left-menu-example .my-menu__head'),
$('#left-menu-example-toggle')
);
});
// initialize another left menu
$(function () {
var menu = ddm.menu($('#another-left-menu-example'));
menu.addToggles(
$('#another-left-menu-example .my-menu__head'),
$('#another-left-menu-example-toggle')
);
});
// initialize right menu
$(function () {
var menu = ddm.menu($('#right-menu-example'));
menu.addToggles(
$('#right-menu-example .my-menu__head'),
$('#right-menu-example-toggle')
);
});
// teardown menu
$(function () {
var initializeTeardownMenu = function () {
$('#teardown-menu-example-buttons .toggle').show()
$('#teardown-menu-example-buttons .teardown').show();
$('#teardown-menu-example-buttons .initialize').hide();
ddm.menu($('#teardown-menu-example')).addToggles(
$('#teardown-menu-example .my-menu__head'),
$('#teardown-menu-example-buttons .toggle')
);
};
var teardownTeardownMenu = function () {
$('#teardown-menu-example-buttons .toggle').hide();
$('#teardown-menu-example-buttons .teardown').hide();
$('#teardown-menu-example-buttons .initialize').show();
ddm.menu($('#teardown-menu-example')).teardown();
};
$('#teardown-menu-example-buttons .teardown').on('click', teardownTeardownMenu);
$('#teardown-menu-example-buttons .initialize').on('click', initializeTeardownMenu);
initializeTeardownMenu();
});
</script>
<script id="jsbin-javascript">
var ddm = ddm || {};
ddm.menu = (function ($) {
(function ensureOverlay() {
var $overlay = $('.ddm-menu-container__overlay');
if ($overlay.length !== 0) { return; }
$overlay = $('<div class="ddm-menu-container__overlay"></div>');
$overlay.prependTo('.ddm-menu-container');
$overlay.on('click.overlay.ddm-menu', function (event) {
$('.ddm-menu--open').trigger('close.ddm-menu');
});
})();
var Menu = function ($element, $container) {
$element.addClass('ddm-menu');
var menu = this;
var containerClass = 'ddm-menu-container--open-left';
if ($element.hasClass('ddm-menu--right')) {
containerClass = 'ddm-menu-container--open-right';
}
var toggles = [];
/* public methods */
this.isOpen = function () {
return $element.hasClass('ddm-menu--open');
};
this.open = function () {
$element.trigger('open.ddm-menu');
};
this.close = function () {
$element.trigger('close.ddm-menu');
};
this.toggle = function () {
$element.trigger('toggle.ddm-menu');
};
this.addToggles = function ($toggle1, $toggle2, $toggle3) {
var args = Array.prototype.slice.apply(arguments);
Array.prototype.push.apply(toggles, args);
$.each(args, function (index, $toggle) {
$toggle.on('click.toggle.ddm-menu', function () {
menu.toggle();
});
});
};
this.teardown = function () {
$element.trigger('teardown.ddm-menu');
};
/*= events =*/
$element.on('open.ddm-menu', function () {
$element.scrollTop(0);
$element.addClass('ddm-menu--open');
$container.addClass(containerClass);
});
$element.on('close.ddm-menu', function () {
$container.removeClass(containerClass);
$element.removeClass('ddm-menu--open');
});
$element.on('toggle.ddm-menu', function () {
if (menu.isOpen()) {
$element.trigger('close.ddm-menu');
} else {
$element.trigger('open.ddm-menu');
}
});
$element.on('teardown.ddm-menu', function () {
if (menu.isOpen()) {
$element.trigger('close.ddm-menu');
}
$element.removeClass('ddm-menu ddm-menu--right');
$element.off('.ddm-menu');
$.each(toggles, function (index, $toggle) {
$toggle.off('.ddm-menu');
});
$element.removeData('ddm-menu-api');
});
};
var menu = function ($element) {
$element = $element.eq(0); // only handles one menu at a time
var api = $element.data('ddm-menu-api');
if (!api) {
var $container = $('.ddm-menu-container');
api = new Menu($element, $container);
$element.data('ddm-menu-api', api);
}
return api;
};
return menu;
})(jQuery);
</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 {
margin: 0;
padding: 0;
}
.ddm-menu-container--open-left .header > .inner {
left: 85%;
}
.ddm-menu-container--open-right .header > .inner {
left: -85%;
}
.ddm-menu-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;
}
.my-menu {
background-color: #333;
}
.my-menu__inner {
color: #fff;
min-height: 100%;
}
.my-menu__head {
background-color: #0b162f;
padding: 0 20px;
line-height: 40px;
font-size: 2em;
}
.my-menu__body {
padding-bottom: 20px;
}
.my-menu ul {
list-style-type: none;
padding: 0;
margin: 0;
}
.my-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;
}
.menu-right-toggle {
position: absolute;
right: 20px;
top: 7px;
}
</style>
</head>
<body>
<div class="ddm-menu-container">
<div class="header">
<div class="inner">
<i id="left-menu-example-toggle" class="fa fa-bars fa-2x menu-left-toggle"></i>
<h1>Menu Demo</h1>
<i id="right-menu-example-toggle" class="fa fa-bars fa-2x menu-right-toggle"></i>
</div>
<div class="reserved"></div>
</div>
<div class="ddm-menu-container__content">
<br />
<button id="another-left-menu-example-toggle">Another Menu</button>
<div id="left-menu-example" class="ddm-menu my-menu">
<div class="my-menu__inner">
<div class="my-menu__head">
Left Menu
</div>
<div class="my-menu__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>
<div id="another-left-menu-example" class="ddm-menu my-menu">
<div class="my-menu__inner">
<div class="my-menu__head">
Another Left Menu
</div>
<div class="my-menu__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>
<div id="right-menu-example" class="ddm-menu ddm-menu--right my-menu">
<div class="my-menu__inner">
<div class="my-menu__head">
Right Menu
</div>
<div class="my-menu__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-times"></i>Disable vertical scrolling when open.</li>
<li><i class="fa-li fa fa-check"></i>Disable horizontal scrolling 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>
<li><i class="fa-li fa fa-check"></i>Option to position menu on the right</li>
<li><i class="fa-li fa fa-check"></i>Multiple menus on same page operate independently</li>
<li><i class="fa-li fa fa-check"></i>Option to teardown menu at any point</li>
</ul>
<h3>Issues</h3>
<ul class="fa-ul">
<li><i class="fa-li fa fa-times"></i>Answer backward compatibility questions.</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>Android 2.3.5 Stock Browser: Menu not scrollable (But Firefox on Android works perfect? Go figure).</li>
<li><i class="fa-li fa fa-check"></i><del>Background color on menu doesn't extend into overscroll area.</del></li>
<li><i class="fa-li fa fa-check"></i><del>Scrollbar detached from menu.</del></li>
<li><i class="fa-li fa fa-check"></i><del>Overlay on menu open to catch clicks.</del></li>
<li><i class="fa-li fa fa-check"></i><del>Public interface doesn't match current ddm-menu version (function call, event names, methods, namespaces).</del></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-times"></i>Stock</li>
</ul>
<h4>Android 2.3.5</h4>
<ul class="fa-ul">
<li><i class="fa-li fa fa-times"></i>Stock</li>
<li><i class="fa-li fa fa-times"></i>Firefox</li>
</ul>
<h4>Android 5.0.1</h4>
<ul class="fa-ul">
<li><i class="fa-li fa fa-times"></i>Chrome</li>
</ul>
<h4>iPhone 4s</h4>
<ul class="fa-ul">
<li><i class="fa-li fa fa-times"></i>Safari</li>
</ul>
<h4>Android 4.0</h4>
<ul class="fa-ul">
<li><i class="fa-li fa fa-times"></i>Stock</li>
</ul>
<h3>Teardown Menu</h3>
<p>DDM Menu has a teardown method that removes all ddm-menu styling and functionality.</p>
<div id="teardown-menu-example-buttons">
<button class="toggle">Open Teardown Menu</button>
<button class="initialize">Initialize</button>
<button class="teardown">Teardown</button>
</div>
<div id="teardown-menu-example" class="ddm-menu my-menu">
<div class="my-menu__inner">
<div class="my-menu__head">
Teardown Menu
</div>
<div class="my-menu__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>Dummy Content</h3>
<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>
// initialize left menu
$(function () {
var menu = ddm.menu($('#left-menu-example'));
menu.addToggles(
$('#left-menu-example .my-menu__head'),
$('#left-menu-example-toggle')
);
});
// initialize another left menu
$(function () {
var menu = ddm.menu($('#another-left-menu-example'));
menu.addToggles(
$('#another-left-menu-example .my-menu__head'),
$('#another-left-menu-example-toggle')
);
});
// initialize right menu
$(function () {
var menu = ddm.menu($('#right-menu-example'));
menu.addToggles(
$('#right-menu-example .my-menu__head'),
$('#right-menu-example-toggle')
);
});
// teardown menu
$(function () {
var initializeTeardownMenu = function () {
$('#teardown-menu-example-buttons .toggle').show()
$('#teardown-menu-example-buttons .teardown').show();
$('#teardown-menu-example-buttons .initialize').hide();
ddm.menu($('#teardown-menu-example')).addToggles(
$('#teardown-menu-example .my-menu__head'),
$('#teardown-menu-example-buttons .toggle')
);
};
var teardownTeardownMenu = function () {
$('#teardown-menu-example-buttons .toggle').hide();
$('#teardown-menu-example-buttons .teardown').hide();
$('#teardown-menu-example-buttons .initialize').show();
ddm.menu($('#teardown-menu-example')).teardown();
};
$('#teardown-menu-example-buttons .teardown').on('click', teardownTeardownMenu);
$('#teardown-menu-example-buttons .initialize').on('click', initializeTeardownMenu);
initializeTeardownMenu();
});
<\/script>
</body>
</html></script>
<script id="jsbin-source-css" type="text/css">.ddm-menu-container {
padding: 0;
width: 100%;
overflow-x: hidden;
}
.ddm-menu-container__content {
width: 100%;
position: relative;
left: 0;
-webkit-transition: left 0.3s;
transition: left 0.3s;
}
.ddm-menu-container--open-left .ddm-menu-container__content {
left: 85%;
}
.ddm-menu-container--open-right .ddm-menu-container__content {
left: -85%;
}
.ddm-menu {
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
width: 85%;
height: 100%;
position: fixed;
z-index: -1;
top: 0;
left: -85%;
-webkit-transition: left 0.3s;
transition: left 0.3s;
overflow: auto;
-webkit-overflow-scrolling: touch;
padding-right: 0;
}
.ddm-menu--open {
left: 0;
z-index: 300;
}
.ddm-menu--right {
left: 100%;
}
.ddm-menu--open.ddm-menu--right {
left: 15%;
}
/* overlay to capture clicks */
.ddm-menu-container__overlay {
height: 100%;
width: 15%;
position: fixed;
top: 0;
left: 85%;
z-index: 200;
/* ie8 allows clicks to pass through transparent elements. Use transparent background image to trick ie8 */
/* inline png for rgba fallback generated from http://1x1px.me/000000-0.png and converted at http://webcodertools.com/imagetobase64converter */
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR4nGNiYAAAAAkAAxkR2eQAAAAASUVORK5CYII=) repeat;
display: none;
}
.ddm-menu-container--open-left .ddm-menu-container__overlay {
display: block;
}
.ddm-menu-container--open-right .ddm-menu-container__overlay {
display: block;
left: 0;
}</script>
<script id="jsbin-source-javascript" type="text/javascript">var ddm = ddm || {};
ddm.menu = (function ($) {
(function ensureOverlay() {
var $overlay = $('.ddm-menu-container__overlay');
if ($overlay.length !== 0) { return; }
$overlay = $('<div class="ddm-menu-container__overlay"></div>');
$overlay.prependTo('.ddm-menu-container');
$overlay.on('click.overlay.ddm-menu', function (event) {
$('.ddm-menu--open').trigger('close.ddm-menu');
});
})();
var Menu = function ($element, $container) {
$element.addClass('ddm-menu');
var menu = this;
var containerClass = 'ddm-menu-container--open-left';
if ($element.hasClass('ddm-menu--right')) {
containerClass = 'ddm-menu-container--open-right';
}
var toggles = [];
/* public methods */
this.isOpen = function () {
return $element.hasClass('ddm-menu--open');
};
this.open = function () {
$element.trigger('open.ddm-menu');
};
this.close = function () {
$element.trigger('close.ddm-menu');
};
this.toggle = function () {
$element.trigger('toggle.ddm-menu');
};
this.addToggles = function ($toggle1, $toggle2, $toggle3) {
var args = Array.prototype.slice.apply(arguments);
Array.prototype.push.apply(toggles, args);
$.each(args, function (index, $toggle) {
$toggle.on('click.toggle.ddm-menu', function () {
menu.toggle();
});
});
};
this.teardown = function () {
$element.trigger('teardown.ddm-menu');
};
/*= events =*/
$element.on('open.ddm-menu', function () {
$element.scrollTop(0);
$element.addClass('ddm-menu--open');
$container.addClass(containerClass);
});
$element.on('close.ddm-menu', function () {
$container.removeClass(containerClass);
$element.removeClass('ddm-menu--open');
});
$element.on('toggle.ddm-menu', function () {
if (menu.isOpen()) {
$element.trigger('close.ddm-menu');
} else {
$element.trigger('open.ddm-menu');
}
});
$element.on('teardown.ddm-menu', function () {
if (menu.isOpen()) {
$element.trigger('close.ddm-menu');
}
$element.removeClass('ddm-menu ddm-menu--right');
$element.off('.ddm-menu');
$.each(toggles, function (index, $toggle) {
$toggle.off('.ddm-menu');
});
$element.removeData('ddm-menu-api');
});
};
var menu = function ($element) {
$element = $element.eq(0); // only handles one menu at a time
var api = $element.data('ddm-menu-api');
if (!api) {
var $container = $('.ddm-menu-container');
api = new Menu($element, $container);
$element.data('ddm-menu-api', api);
}
return api;
};
return menu;
})(jQuery);
</script></body>
</html>
Raw
jsbin.dapupo.css
.ddm-menu-container {
padding: 0;
width: 100%;
overflow-x: hidden;
}
.ddm-menu-container__content {
width: 100%;
position: relative;
left: 0;
-webkit-transition: left 0.3s;
transition: left 0.3s;
}
.ddm-menu-container--open-left .ddm-menu-container__content {
left: 85%;
}
.ddm-menu-container--open-right .ddm-menu-container__content {
left: -85%;
}
.ddm-menu {
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
width: 85%;
height: 100%;
position: fixed;
z-index: -1;
top: 0;
left: -85%;
-webkit-transition: left 0.3s;
transition: left 0.3s;
overflow: auto;
-webkit-overflow-scrolling: touch;
padding-right: 0;
}
.ddm-menu--open {
left: 0;
z-index: 300;
}
.ddm-menu--right {
left: 100%;
}
.ddm-menu--open.ddm-menu--right {
left: 15%;
}
/* overlay to capture clicks */
.ddm-menu-container__overlay {
height: 100%;
width: 15%;
position: fixed;
top: 0;
left: 85%;
z-index: 200;
/* ie8 allows clicks to pass through transparent elements. Use transparent background image to trick ie8 */
/* inline png for rgba fallback generated from http://1x1px.me/000000-0.png and converted at http://webcodertools.com/imagetobase64converter */
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR4nGNiYAAAAAkAAxkR2eQAAAAASUVORK5CYII=) repeat;
display: none;
}
.ddm-menu-container--open-left .ddm-menu-container__overlay {
display: block;
}
.ddm-menu-container--open-right .ddm-menu-container__overlay {
display: block;
left: 0;
}
Raw
jsbin.dapupo.js
var ddm = ddm || {};
ddm.menu = (function ($) {
(function ensureOverlay() {
var $overlay = $('.ddm-menu-container__overlay');
if ($overlay.length !== 0) { return; }
$overlay = $('<div class="ddm-menu-container__overlay"></div>');
$overlay.prependTo('.ddm-menu-container');
$overlay.on('click.overlay.ddm-menu', function (event) {
$('.ddm-menu--open').trigger('close.ddm-menu');
});
})();
var Menu = function ($element, $container) {
$element.addClass('ddm-menu');
var menu = this;
var containerClass = 'ddm-menu-container--open-left';
if ($element.hasClass('ddm-menu--right')) {
containerClass = 'ddm-menu-container--open-right';
}
var toggles = [];
/* public methods */
this.isOpen = function () {
return $element.hasClass('ddm-menu--open');
};
this.open = function () {
$element.trigger('open.ddm-menu');
};
this.close = function () {
$element.trigger('close.ddm-menu');
};
this.toggle = function () {
$element.trigger('toggle.ddm-menu');
};
this.addToggles = function ($toggle1, $toggle2, $toggle3) {
var args = Array.prototype.slice.apply(arguments);
Array.prototype.push.apply(toggles, args);
$.each(args, function (index, $toggle) {
$toggle.on('click.toggle.ddm-menu', function () {
menu.toggle();
});
});
};
this.teardown = function () {
$element.trigger('teardown.ddm-menu');
};
/*= events =*/
$element.on('open.ddm-menu', function () {
$element.scrollTop(0);
$element.addClass('ddm-menu--open');
$container.addClass(containerClass);
});
$element.on('close.ddm-menu', function () {
$container.removeClass(containerClass);
$element.removeClass('ddm-menu--open');
});
$element.on('toggle.ddm-menu', function () {
if (menu.isOpen()) {
$element.trigger('close.ddm-menu');
} else {
$element.trigger('open.ddm-menu');
}
});
$element.on('teardown.ddm-menu', function () {
if (menu.isOpen()) {
$element.trigger('close.ddm-menu');
}
$element.removeClass('ddm-menu ddm-menu--right');
$element.off('.ddm-menu');
$.each(toggles, function (index, $toggle) {
$toggle.off('.ddm-menu');
});
$element.removeData('ddm-menu-api');
});
};
var menu = function ($element) {
$element = $element.eq(0); // only handles one menu at a time
var api = $element.data('ddm-menu-api');
if (!api) {
var $container = $('.ddm-menu-container');
api = new Menu($element, $container);
$element.data('ddm-menu-api', api);
}
return api;
};
return menu;
})(jQuery);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment