drawer
Version:
touch-enabled slide-in drawer ui component
51 lines (45 loc) • 4.97 kB
HTML
<html>
<head>
<title>Drawer</title>
<meta name='viewport' content='width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0'>
<meta name='viewport' content='initial-scale=1, maximum-scale=1, user-scalable=0' media='(device-height: 568px)'>
<link rel="stylesheet" href="../build/build.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<section class="drawer">
<ul>
<li>Item one</li>
<li>Item two</li>
<li>Item three</li>
<li>Item four</li>
<li>Item five</li>
<li>Item six</li>
<li>Item seven</li>
<li>Item eight</li>
<li>Item nine</li>
<li>Item ten</li>
</ul>
</section>
<section id="wrapper">
<section id="content">
<h1>Drawer</h1>
<p>Click to <a href="#" onclick="drawer.show()">open</a> or <a href="#" onclick="drawer.hide()">close</a>.</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent pellentesque quis sapien quis consequat. Integer nec elit magna. Curabitur sollicitudin feugiat pharetra. Phasellus pharetra, justo ut porta feugiat, purus tortor venenatis massa, nec tempus leo lorem ut sapien. Pellentesque venenatis scelerisque risus, vel dignissim urna pretium et. Vivamus nec posuere enim, vitae consectetur libero. Morbi a ipsum eget velit vehicula fringilla in vel turpis. Integer tempor magna et ornare accumsan. Mauris eleifend sapien blandit dolor sagittis aliquet. Fusce vehicula semper egestas. Maecenas facilisis risus diam. Aenean risus mauris, lacinia vitae placerat porta, sollicitudin ac purus. Donec faucibus sagittis diam non convallis. Sed aliquet, magna eu congue eleifend, nulla metus imperdiet metus, non fermentum turpis purus ac nulla. In eget metus eget mi mollis ornare. Phasellus ullamcorper et libero quis blandit.</p>
<p>Proin hendrerit ultricies turpis. Vivamus suscipit nisi quis tellus volutpat, quis varius nulla pulvinar. Phasellus est magna, sagittis in congue ut, ultricies et ligula. Phasellus vestibulum, enim eget molestie condimentum, augue quam cursus diam, sit amet consequat diam magna malesuada mi. Nunc sed volutpat sapien. In vel ullamcorper urna. Duis venenatis, tortor id tempor sodales, velit odio accumsan ante, in facilisis elit massa sed enim. Nulla malesuada tincidunt nibh, vitae lacinia diam vehicula eu. Integer faucibus scelerisque est. Vivamus id orci semper, consequat tellus eu, sodales massa. Etiam libero nisl, dignissim a tempor sed, condimentum nec augue. Maecenas non sapien tincidunt, laoreet erat eget, gravida sapien. Sed vulputate tortor nec tincidunt lobortis. Suspendisse posuere at nunc quis commodo.</p>
<p>Nulla at ullamcorper nulla. Phasellus sed urna fringilla, interdum lacus ut, interdum quam. Duis odio est, aliquam vitae imperdiet et, suscipit in lacus. Praesent nec sollicitudin neque. Sed quis lobortis mi. Integer bibendum, risus sed dictum consequat, neque ipsum pellentesque nibh, id aliquet leo velit eu mi. Etiam augue nisi, dapibus non lectus tristique, hendrerit venenatis augue. Aenean eu feugiat diam. Quisque porta nisl in sem pretium, non pretium arcu posuere. Fusce quis sollicitudin leo. Donec porta felis at dui interdum adipiscing. Nunc suscipit ac urna sagittis interdum. Curabitur a lacus vitae tellus egestas ornare sit amet id neque. Vivamus ac felis quis mauris venenatis interdum at eu nisi. Donec tempor facilisis purus, volutpat semper neque convallis sit amet.</p>
<p>Vivamus cursus nulla turpis, sit amet porttitor lacus gravida nec. Vivamus quis blandit eros. Duis vestibulum consequat faucibus. Phasellus quis mauris tempor, hendrerit est at, fringilla turpis. Suspendisse nec porta leo. Cras elementum consectetur porta. Fusce a erat scelerisque, gravida dolor a, elementum urna. Curabitur a tempor odio. Curabitur vitae sollicitudin turpis, quis placerat urna. Suspendisse sagittis commodo massa.</p>
<p>Nunc malesuada eros sit amet massa posuere, sit amet luctus nisl tempus. Proin sagittis in elit eu hendrerit. Aenean in pellentesque augue. Vestibulum felis felis, elementum non lectus eget, fermentum commodo quam. Sed eleifend mauris ut dui pretium mattis. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Curabitur vestibulum blandit ipsum eget suscipit. Phasellus vitae turpis pharetra, ultricies orci nec, congue purus. Cras et elit ultrices, dictum nulla in, tincidunt arcu. Vivamus quis leo porta, cursus nulla a, aliquam purus. Suspendisse ut mauris a eros congue fringilla. Nunc dolor erat, lacinia in ornare a, aliquet ac velit. Interdum et malesuada fames ac ante ipsum primis in faucibus. Sed ac hendrerit nunc. Proin sit amet purus id lorem aliquam tempus vel a arcu.</p>
</section>
</section>
<script src="../build/build.js"></script>
<script>
var Drawer = require('drawer');
var el = document.querySelector('#wrapper');
var drawer = Drawer(el, {
width: 245
});
</script>
</html>