New Revised CSS Library Forums Web Tools
FAQs Awards Usage Terms Contact
<!DOCTYPE HTML>
<head>

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

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

<script src="sidetogglemenu.js">

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

</script>

<script>

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

</script>

</head>

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

<ul>
<li><a href="http://www.dynamicdrive.com/">Dynamic Drive</a></li>
<li><a href="http://www.dynamicdrive.com/style/">CSS Library</a></li>
<li><a href="http://www.dynamicdrive.com/forums/">Forums</a></li>
<li><a href="http://tools.dynamicdrive.com/imageoptimizer/">Gif Optimizer</a></li>
<li><a href="http://tools.dynamicdrive.com/favicon/">Favicon Creator</a></li>
<li><a href="http://tools.dynamicdrive.com/button/">Button Maker</a></li>
</ul>

<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.
</p>

</div>


</body>
</html>