Responsive Side Sliding Menu with jQuery - SlidingMenuJs

SlidingMenuJs is a responsive and mobile-friendly jQuery side menu that slides from the right side of your page, similar to the apps menu on Android. Unlike the other side menu plugins, SlidingMenuJs will cover the main content of your page instead of pushing it to the right.

How to use it:

1. Include jQuery slidingMenuJs plugin's stylesheet file in the head of your page.

<link rel="stylesheet" href="src/css/jquery.sliding_menu.css">

2. Create the html for the side menu.

<div id="menu" style="display:none;">
<ul >
<li><a href="https://www.jqueryscript.net/slider/">jQuery Slider Plugins</a></li>
<li><a href="https://www.jqueryscript.net/slideshow/">jQuery Slideshow Plugins</a></li>
<li><a href="https://www.jqueryscript.net/menu/">jQuery Menu Plugins</a></li>
<li><a href="https://www.jqueryscript.net/table/">jQuery Table Plugins</a></li>
<li><a href="https://www.jqueryscript.net/gallery/">jQuery Gallery Plugins</a></li>
</ul>
</div>

3. Include the jQuery javascript library and jQuery SlidingMenuJs plugin at the end of your page.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="src/js/jquery.sliding_menu.js"></script> 

4. Initialize the plugin and customize the side menu in the javascript.

<script>
$(document).ready(function(){
$('#menu ul').sliding_menu_js({
header_title:'jQueryScript.Net!', // the title of the header
header_logo: "logo.png" // logo image
toggle_button: true, // show the toggle button
transitionSpeed: 0.5, // the animation speed of transition
easing: 'ease' // easing effects
});
});
</script>

Change log:

• bug fixed.

---

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