jQuery,Drawer,menu,css,versatile, Drawer – versatile drawer menu exploitation jQuery, iScroll and CSS3, Shopinson, Shopinson

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.

[maxbutton id=”2″ url=”https://github.com/blivesta/drawer” ]

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

0 Comments

Leave a reply

Your email address will not be published. Required fields are marked *

*

shopinson-logo-32

©2020 Shopinson: complete guide to programming language

CONTACT US

We're not around right now. But you can send us an email and we'll get back to you, asap.

Sending

Log in with your credentials

or    

Forgot your details?

Create Account