New Revised CSS Library Forums Web Tools
FAQs Awards Usage Terms Contact

<link rel="stylesheet" href="sidetogglemenu.css" />

<script type="text/javascript" src=""></script>

<script src="sidetogglemenu.js">

* Responsive Side Toggle Menu(c) Dynamic Drive (
* Last updated: May 28th, 13'
* Visit for this script and 100s more.



jQuery(function(){ // on DOM load
menu1 = new sidetogglemenu({ // initialize first menu example
id: 'togglemenu1',
marginoffset: 10

menu2 = new sidetogglemenu({ // initialize second menu example
id: 'togglemenu2',
position: 'right',
source: 'togglemenu.txt',
revealamt: -5



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

<div id="togglemenu1" class="sidetogglemenu">

<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>

<p style="padding:10px">
This menu's markup is defined inline on the page. With the setting <code>pushcontent: true</code>, the menu shifts the rest of the page's content to make room for itself when revealed.