Drawer could be a jQuery plugin for making a responsive, touch-enabled and animated facet menu that slides out from the sting of the screen once clicking or touching the trigger. the same as the draw navigation as you seen in Android App’s.

Drawer - versatile drawer menu exploitation jQuery, iScroll and CSS3
Drawer – Demos files

the same as the draw navigation as you seen in Android App’s.

View Demo

How to use jQuery Drawer

  1. Include the following css file to your web app page
<link href="…Path_to/sandbox/sandbox.css" rel="stylesheet">
<link href="…Path_to/dist/css/drawer.min.css" rel="stylesheet">
  1. Embrace the following jQuery Library snippet of codes at the bottom just before the closing tag </body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/iScroll/5.2.0/iscroll.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<!-- Bootstrap dropdown v4.0.0-alpha -->
<!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha/js/bootstrap.min.js"></script> -->
<script src="…path_to/dist/js/drawer.min.js" charset="utf-8"></script>
  1. Initialize the drawer in your web app by adding this just before </body>
<script>
  $(document).ready(function() {
    $('.drawer').drawer();
  });
</script>

Source code [Full script]

<!DOCTYPE html>
<html lang="en" class="bg-pink">
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Sandbox: Drawer Left</title>
  <link href="sandbox/sandbox.css" rel="stylesheet">
  <link href="dist/css/drawer.min.css" rel="stylesheet">
</head>
<body class="drawer drawer--left">

  <header role="banner">
    <button type="button" class="drawer-toggle drawer-hamburger">
      <span class="sr-only">toggle navigation</span>
      <span class="drawer-hamburger-icon"></span>
    </button>

    <nav class="drawer-nav" role="navigation">
      <ul class="drawer-menu">
        <li><a class="drawer-brand" href="sandbox/index.html">Drawer</a></li>
        <li><a class="drawer-menu-item" href="sandbox/top.html">Top</a></li>
        <li><a class="drawer-menu-item" href="sandbox/index.html">Left</a></li>
        <li><a class="drawer-menu-item" href="sandbox/right.html">Right</a></li>
        <li class="drawer-dropdown">
          <a class="drawer-menu-item" data-target="#" href="#" data-toggle="dropdown" role="button" aria-expanded="false">
            Navbar <span class="drawer-caret"></span>
          </a>
          <ul class="drawer-dropdown-menu">
            <li><a class="drawer-dropdown-menu-item" href="sandbox/navbar-top.html">Top</a></li>
            <li><a class="drawer-dropdown-menu-item" href="sandbox/navbar-left.html">Left</a></li>
            <li><a class="drawer-dropdown-menu-item" href="sandbox/navbar-right.html">Right</a></li>
          </ul>
        </li>
        <li class="drawer-dropdown">
          <a class="drawer-menu-item" data-target="#" href="#" data-toggle="dropdown" role="button" aria-expanded="false">
            Fixed navbar <span class="drawer-caret"></span>
          </a>
          <ul class="drawer-dropdown-menu">
            <li><a class="drawer-dropdown-menu-item" href="sandbox/fixed-navbar-top.html">Top</a></li>
            <li><a class="drawer-dropdown-menu-item" href="sandbox/fixed-navbar-left.html">Left</a></li>
            <li><a class="drawer-dropdown-menu-item" href="sandbox/fixed-navbar-right.html">Right</a></li>
          </ul>
        </li>
        <li class="drawer-dropdown">
          <a class="drawer-menu-item" href="#" data-toggle="dropdown" role="button" aria-expanded="false">
            Sidebar <span class="drawer-caret"></span>
          </a>
          <ul class="drawer-dropdown-menu">
            <li><a class="drawer-dropdown-menu-item" href="sandbox/sidebar-left.html">Left</a></li>
            <li><a class="drawer-dropdown-menu-item" href="sandbox/sidebar-right.html">Right</a></li>
          </ul>
        </li>
        <li style="height:500px"><span class="drawer-menu-item" >height:500px box</span></li>
        <li><span class="drawer-menu-item" >box end</span></li>
      </ul>
    </nav>
  </header>

  <!-- content -->
  <main role="main">
    <section class="item">
      <h1>Drawer Left</h1>
      <p>
        <button type="button" class="drawer-toggle">Drawer toggle</button>
      </p>
    </section>
  </main>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/iScroll/5.2.0/iscroll.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
  <!-- Bootstrap dropdown v4.0.0-alpha -->
  <!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha/js/bootstrap.min.js"></script> -->
  <script src="dist/js/drawer.min.js" charset="utf-8"></script>
  <script>
    $(document).ready(function() {
      $('.drawer').drawer();
    });
  </script>

</body>
</html>

Official Owner website: https://github.com/blivesta/drawer

LEAVE A REPLY

Please enter your comment!
Please enter your name here