jQuery Side Penal Navigation

Main Features

• Fully Responsive, Adaptiveheight, Rotation Support.
• Unlimited Widgets can be added to Side Penal
• CSS3 and jQuery (Sliding & Fading) Animations Enabled.
• Font Awesome Iconic Fonts.
• Background Dim Overlay when Side Penal open
• Chrome, Safari, Firefox, Opera, IE7+, IOS, Android and windows phone supported.
• User and SEO Friendly.
• Clean and simple HTML structure.
• Lightweight File Size.
• Easy to Implement.

How to Use

1. Load the jQuery JavaScript Library, Font Awesome iconic Fonts, Side Penal CSS and Side Penal JS File into HTML document.

   <!-- Font Awesome-->
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />

   <!--jQuery-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

   <!--Side Penal CSS-->
<link rel="stylesheet" href="css/side-penal.css" />

   <!--Side Penal JS-->
<script src="js/jquery.side.penal.js"></script>

2. Create an empty Button element for opening Side Penal with the following mentioned class.

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

Note: You can adjust this button anywhere else in your website/app to open navigation.
By default, it is fixed on top left corner of the Web page.

3. Copy the following HTML structure and add your links into it.

<!--Side Penal Start-->
<section class="side-penal">

<div class="penal-widget top-header">
<h2> jQuery Side Penal® </h2>
   <i class="tagline"> Tag line text goes here.</i>

<menu class="top-links">
<menuitem> <a href="#2"> Home </a> </menuitem> 
<menuitem> <a href="#2"> About</a> </menuitem> 
<menuitem> <a href="#2"> Contact </a> </menuitem> 
<menuitem> <a href="#2"> Blog </a> </menuitem> 
</menu>

</div>

<select class="penal-select">

<option> Option Bar</option>
<option> Option two</option>
<option> Option three</option>

</select>

<ul class="penal-list">
<li><a href=#1">Side Penal List Item </a></li>
<li> <a href=#1">Second Item </a></li>
<li> <a href=#1">Third Item </a></li>
<li> <a href=#1">Fourth Item </a></li>
<li> <a href=#1">Penal item six </a></li>
</ul>

<div class="penal-widget toggle-switch">
<h3> Toggle Options</h3>
<ul class="toggle-buttons">
<li> Switch Me </li>
<li> Switch Me </li>
<li> Switch Me </li>
</ul>


</div>


<div class="penal-widget about">
<h3> About </h3>
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. </p>

</div>

</section> 
<!--Side Penal End-->