Material Design Sidenav Plugin With jQuery And CSS3 - side-penal

Yet another jQuery plugin which helps front-end developers to quickly create responsive, mobile-compatible, SEO-friendly off-canvas panel (aka. drawer, sidenav) inspired by Material Design.

How to use it:

1. Load the necessary Font Awesome for the icons.

<link rel="stylesheet" href="/path/to/font-awesome.min.css">

2. Load jQuery library and the jQuery side-penal plugin's files.

<script src="/path/to/jquery.min.js"></script>
<link rel="stylesheet" href="/path/to/side-penal.css">
<script src="/path/to/jquery.side.penal.js"></script>

3. Code the HTML for the sidenav.

<section class="side-penal">
  <div class="penal-widget top-header">
    <h2> Nav Title </h2>
    <i class="tagline"> Tagline here </i>
    <menu class="top-links"> 
      <menuitem> <a href="#"> Home </a> </menuitem> 
      <menuitem> <a href="#"> About</a> </menuitem> 
      <menuitem> <a href="#"> Contact </a> </menuitem> 
    </menu>
  </div>
  <select class="penal-select">
    <option> Option 1</option>
    <option> Option 2</option>
    <option> Option 3</option>
  </select>
  <ul class="penal-list">
    <li> <a href=#"> List 1 </a></li>
    <li> <a href=#"> List 2 </a></li>
    <li> <a href=#"> List 3 </a></li>
  </ul>
  <div class="penal-widget toggle-switch">
    <h3> Toggle Switches </h3>
    <ul class="toggle-buttons">
      <li> Switch 1 </li>
      <li> Switch 2 </li>
      <li> Switch 3 </li>
    </ul>
  </div>
  <div class="penal-widget about">
    <h3> Footer </h3>
  </div>
</section>

4. Create a hamburger button to toggle the sidenav. Done.

<button class="penal-trigger"></button>

About Author:

Author: Asif Mughal

Website: www.codehim.com

---

This awesome jQuery plugin is developed by CodeHimBlog. For more Advanced Usages, please check the demo page or visit the official website.