jQuery Sidebar Toggle Menu Plugin - sidetogglemenu

sidetogglemenu is a simple jQuery plugin that creates side bar menu on your page that slides out from the edge of the browser window with CSS3 transition effects. The sidebar menus are dismissed when the user clicks anywhere on the page or when clicking on a link inside the menu. For mobile devices the menus are adaptive in that it automatically switches to a basic drop down menu using a toggle button at the top of the page when the user's device width is 480px or less (configurable).

Related plugins:

• YouTube Like Left Side Drop Down Menu Effect
• jQuery Simple Slide Out And Drawer Effect Plugin
• Cool Animated Side Menus with Sliding and Pushing Effects
• Simple and Touch-Enabled Responsive Navigation Menu Plugin
• jQuery Plugin For Responsive Side Menu - sidr
• Three-Dimensional and Space Efficient Menu - Meny
• Paneled-Style Navigation Menu Plugin - jPanelMenu
• JS Library For Facebook Style Side Panel Menus - Snap.js

How to use it:

1. Include jQuery library and jQuery sidetogglemenu in the header

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="sidetogglemenu.js">

2. Create the html for the sidebar menu

<div id="togglemenu1" class="sidetogglemenu">
<ul>
<li><a href="#">Dynamic Drive</a></li>
<li><a href="#">CSS Library</a></li>
<li><a href="#">Forums</a></li>
<li><a href="#">Gif Optimizer</a></li>
<li><a href="#">Favicon Creator</a></li>
<li><a href="#">Button Maker</a></li>
</ul>
</div>

3. Create a button to toggle the menu

<button onClick="menu1.toggle();" class="sideviewtoggle">Toggle Menu 1</button>

4. The CSS

body { /* CSS for BODY transition when menu is set to push BODY content. */
-moz-transition: left 100ms ease-in-out, right 100ms ease-in-out;
-webkit-transition: left 100ms ease-in-out, right 100ms ease-in-out;
transition: left 100ms ease-in-out, right 100ms ease-in-out;
}
.sidetogglemenu { /* shared class for side toggle menus */
border-right: 5px solid #ff573b;
background-color: white;
width: 170px; /* default menu width */
height: 100%;
position: fixed;
top: -100%;
clear: both;
display: block;
visibility: 'hidden';
box-shadow: 5px 0 5px rgba(174, 174, 174, .8);
-moz-transition: all 100ms ease-in-out; /* change 100ms to slide in animation time */
-webkit-transition: all 100ms ease-in-out;
transition: all 100ms ease-in-out;
}
.sidetogglemenu ul {
padding: 0;
margin: 0;
list-style: none;
}
.sidetogglemenu a {
font: bold 13px Verdana;
padding: 10px;
display: block;
color: #595959;
text-decoration: none;
border-bottom: 1px solid #C0C0C0;
}
.sidetogglemenu a:hover {
background: red;
color: white;
}
/* #######  Additional CSS for toggle menu #togglemenu2  ####### */

#togglemenu2 {
width: 250px;
border-width: 0;
background: rgb(53,106,160);
box-shadow: -5px 0 5px rgba(174, 174, 174, .8);
}
#togglemenu2 ul a {
color: white;
border-bottom: 1px solid #eee;
font: bold 14px;
text-transform: uppercase;
}
#togglemenu2 a:hover {
background: #162a50;
color: white;
}
/* #######  Responsive Menu related CSS  ####### */

div#smallscreentoggler { /* CSS for small screen menus toggler, shown when device width is below specified */
width: 1.5em;
z-index: 10000;
color: white;
position: relative;
float: right;
overflow: hidden;
background: gray;
font: normal 1.8em Arial;
margin-bottom: 0.5em;
text-align: center;
box-shadow: -3px 3px 5px gray;
cursor: pointer;
border-radius: 2px;
display: none;
-moz-transition: all 200ms ease-in-out;
-webkit-transition: all 200ms ease-in-out;
transition: all 200ms ease-in-out;
}
div#smallscreentoggler:hover {
background: #eee;
color: black;
-moz-transition: all 200ms ease-in-out;
-webkit-transition: all 200ms ease-in-out;
transition: all 200ms ease-in-out;
}
 @media screen and (max-width: 480px) { /* CSS when device width is 480px or less */
div#smallscreentoggler {
display: block; /* show small screen menus toggler */
}
.sidetogglemenu { /* Set position of menus to static */
position: static;
border-width: 0;
border-top-width: 1px;
width: 98% !important;
height: auto;
box-shadow: 5px 0 5px rgba(174, 174, 174, .8) !important;
margin-left: 5px;
margin-bottom: 10px;
display: none;
}
}

5. Initialize the plugin

<script>
jQuery(function(){ 
menu1 = new sidetogglemenu({
id: 'togglemenu1',
marginoffset: 10
})
})
</script>

---

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