bootstrap-drawer

<!DOCTYPE html>     <html class="no-js">  <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>bootstrap-drawer documentation</title> <meta name="description" content=""> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css"> <link rel="stylesheet" type="text/css" href="example/drawer-docs.css"> <link rel="stylesheet" type="text/css" href="example/github.css"> <script> (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){ (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o), m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m) })(window,document,'script','//www.google-analytics.com/analytics.js','ga'); ga('create', 'UA-59331212-1', 'auto'); ga('require', 'displayfeatures'); ga('send', 'pageview'); </script> </head> <body class="has-offcanvas"> <div id="docDrawer" class="drawer dw-xs-10 dw-sm-6 dw-md-5 fold in" aria-labelledby="docDrawer"> <div class="drawer-controls"> <a href="#docDrawer" data-toggle="drawer" href="#docDrawer" aria-foldedopen="false" aria-controls="docDrawer" class="btn btn-default"><i class="fa fa-align-justify"></i></a> </div> <div class="drawer-contents"> <div class="drawer-heading"> <h2 class="drawer-title"><strong>bootstrap-drawer</strong></h2> </div> <div class="drawer-body"> <iframe src="https://ghbtns.com/github-btn.html?user=clineamb&repo=bootstrap-drawer&type=star&count=true" frameborder="0" scrolling="0" width="100" height="20px"></iframe>  <iframe src="https://ghbtns.com/github-btn.html?user=clineamb&repo=bootstrap-drawer&type=watch&count=true&v=2" frameborder="0" scrolling="0" width="100" height="20px"></iframe> </div> <div class="drawer-heading"> <h3 class="drawer-title">Basics</h2> </div> <ul id="doc-nav" class="drawer-fullnav"> <li role="presentation"><a href="index.html">Home / Basic Usage</a></li> <li role="presentation"><a href="customize.html">Position / Colors</a></li> <li role="presentation"><a href="javascript.html">data-toggle / Javascript</a></li> <li role="presentation"><a href="less.html">Using Less</a></li> </ul> <div class="drawer-heading"> <h3 class="drawer-title">Other Links</h2> </div> <ul class="drawer-fullnav"> <li role="presentation"><a href="http://github.com/clineamb/bootstrap-drawer" target="_blank"><i class="fa fa-github-alt"></i>  GitHub Repo</a></li> <li role="presentation"><a href="http://www.npmjs.com/package/bootstrap-drawer" target="_blank"><i class="fa fa-share-square"></i> npm</a></li> <li role="presentation"><a href="http://twitter.com/clineamb" target="_blank"><i class="fa fa-twitter"></i> @clineamb</a></li> <li><a name=""><iframe src="https://ghbtns.com/github-btn.html?user=clineamb&type=follow&count=true" frameborder="0" scrolling="0" width="100%" height="20px"></iframe></a></li> </ul> <div class="drawer-footer"> <small>© 2015 Caroline Amaba</small> </div> </div> </div> <div id="drawer-docs"> <div class="jumbotron page-topper"> <div class="container"> <h1>bootstrap-drawer</h1> <h4>bootstrap-drawer is a Bootstrap add-on that gives you an off-canvas/drawer element to your page or container! Check it out by clicking the toggle in the top-left corner!</h4> </div> </div> <div id="drawer-docs-content" class="container"> <h2 id="drawer-customization">Drawer Customization</h2> <p><strong>bootstrap-drawer</strong> comes with some built-in classes to customize some basics about your drawer. These utility classes are modeled after Bootstrap's Navbar components.</p> <hr> <h2 id="position">Position</h2> <p>Sometimes you might want the drawer to the right. You can do this quickly by adding <code>.drawer-right</code> to the <code>.drawer</code> container.</p> <pre><code class="lang-html"><div id="drawerExample2" class="drawer drawer-right ..."> ... </div> </code></pre> <div class="panel panel-default has-inner-drawer example-container-right"> <div id="drawerExample2" class="drawer drawer-right drawer-inside dw-xs-5 fold" aria-labelledby="drawerExample2"> <div class="drawer-controls"> <a href="#drawerExample2" data-toggle="drawer" href="#drawerExample2" aria-foldedopen="false" aria-controls="drawerExample2" class="btn btn-primary btn-sm">Menu</a> </div> <div class="drawer-contents"> <div class="drawer-heading"> <strong>right menu example</strong> </div> <ul class="drawer-nav"> <li role="presentation" class="active"><a href="#">Link</a></li> <li role="presentation"><a href="#">Link</a></li> <li role="presentation"><a href="#">Link</a></li> </ul> </div> </div> <div class="panel-body"> <p>You can position the drawer to the right by adding the <code>.drawer-right</code> class. This also works on full-page drawers.</p> </div> </div> <hr> <h2 id="inverse-color">Inverse Color</h2> <p>Like the Bootstrap navbar, there is an inverse color option to the drawer. Just add <code>.drawer-inverse</code> to your <code>.drawer</code> container.</p> <pre><code class="lang-html"><div id="drawerExample2" class="drawer drawer-inverse ..."> ... </div> </code></pre> <div class="panel panel-default has-inner-drawer example-container"> <div id="drawerExample3" class="drawer drawer-inverse drawer-inside dw-xs-5 fold" aria-labelledby="drawerExample3"> <div class="drawer-controls"> <a href="#drawerExample3" data-toggle="drawer" href="#drawerExample3" aria-foldedopen="false" aria-controls="drawerExample3" class="btn btn-primary btn-sm">Menu</a> </div> <div class="drawer-contents"> <div class="drawer-heading"> <strong>inverse menu example</strong> </div> <ul class="drawer-fullnav"> <li role="presentation" class="active"><a href="#">Link</a></li> <li role="presentation"><a href="#">Link</a></li> <li role="presentation"><a href="#">Link</a></li> </ul> </div> </div> <div class="panel-body"> <p>You can inverse the drawer color (like navbar) by adding <code>.drawer-inverse</code> class.</p> </div> </div> <div id="drawer-docs-footer"> <a href="#docDrawer" data-toggle="drawer" class="btn btn-lg btn-block btn-primary">Open the Drawer</a> </div> </div> <script src="//code.jquery.com/jquery-2.1.3.min.js"></script> <script src="example/bootstrap.min.js"></script> <script src="example/highlight.pack.js"></script> <script src="dist/js/drawer.js"></script> <script src="example/docs.js"></script> </body> </html>