Material Design Sidenav Plugin With jQuery And CSS3 - side-penal
File Size: | 9.5 KB |
---|---|
Views Total: | 2519 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |

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.