Flip Menu Sidebar creates a menu out of an ordinary HTML using list types. It has a one external .js file inside, the images used instead the default list bullets. And, if it has previously open file or a folder, it should be closed when the current file or folder is open.
You can add more link in the Flip Menu as many as you wish. And, you can edit the style, or you can put some animation using CSS.
Directions:
First: Kindly copy the following code below to the HEAD section of your page.
<style type="text/css">
a {
color:blue;
text-decoration:none;
}
a:hover {
color:red;
}
</style>
<script type="text/javascript" language="JavaScript" src="js/menu.js">
</script>
The above code requires to DOWNLOAD the sourcecode and the images. Just click the ("Download Code") below. For the image, download by right clicking each link below, and select "Save image as...".
Second: Add the code below to the BODY section of the page.
<li><b>Sourcecodester
</b> <li><a href="http://www.sourcecodester.com/">Home
</a></li> <li><a href="http://www.sourcecodester.com/programming">Programming
</a></li> <li><a href="http://www.sourcecodester.com/mobile">Mobile
</a></li> <li><a href="http://www.sourcecodester.com/blog">Blog
</a></li> <li><a href="http://www.sourcecodester.com/article">Articles
</a></li> <li><a href="http://www.sourcecodester.com/tutorial">Tutorials
</a></li> <li><a href="http://www.sourcecodester.com/contact">Contact
</a></li> <li><a href="http://www.sourcecodester.com/submit-code">Submit Code
</a></li> <li><a href="http://www.sourcecodester.com/visual-basic">Visual Basic
</a></li> <li><a href="http://www.sourcecodester.com/visual-basic-net">Visual Basic .NET
</a></li> <li><a href="http://www.sourcecodester.com/asp">ASP/ASP .NET
</a></li> <li><a href="http://www.sourcecodester.com/c-sharp">C#
</a></li> <li><a href="http://www.sourcecodester.com/cpp">C/C++
</a></li> <li><a href="http://www.sourcecodester.com/delphi">Delphi
</a></li> <li><a href="http://www.sourcecodester.com/java">Java
</a></li> <li><a href="http://www.sourcecodester.com/javascript">JavaScript
</a></li> <li><a href="http://www.sourcecodester.com/php">PHP
</a></li> <li><a href="http://www.sourcecodester.com/sql">SQL
</a></li> <li><a href="http://www.sourcecodester.com/foxpro">Visual FoxPro
</a></li> <li><a href="http://www.sourcecodester.com/html">HTML/CSS
</a></li> <li><a href="http://www.sourcecodester.com/other">Others
</a></li> <li><a href="http://www.sourcecodester.com/submit-code">Source Code
</a></li> <li><a href="http://www.sourcecodester.com/forum/new-topic">Forum Topic
</a></li> <li><a href="http://www.sourcecodester.com/submit-tutorial">Submit a Tutorial
</a></li> <li><a href="http://www.sourcecodester.com/submit-mobile">Mobile Programming
</a></li> <li><a href="http://www.sourcecodester.com/node/add/blog">Blog
</a></li> <li><a href="javascript:closeAllFlips()">Hide All
</a></li> <li><a href="javascript:openAllFlips()">Show All
</a></li>
