« »

Flip Menu creates a collapsible menu tree out of an ordinary HTML list! It consists of just one external .js file, in which you specify settings such as whether to persistence the JavaScript menu state (using cookies), the images used to replace the default list bullets, and if any previously open branches should be closed when the current one is open. Very nice.

Label: Flip Menu (v 5.0)

Report to us error of this JavaScript

Demo
Enlarge
Reload
New window

Code
Files
JavaScript
HTML
Print

Copy All x2

<script type="text/javascript" language="JavaScript" src="flipmenu.js"></script>
	<!--
    	This script downloaded from www.JavaScriptBank.com
    	Come to view and download over 2000+ free javascript at www.JavaScriptBank.com
	-->

Copy All x2

<div style="text-align: left; width: 20%;">
<ul class="flipMenu">
<li>JavaScript Resources
    <ul>
   	<li><a href="http://www.javascriptbank.com/">JavaScript Kit</a></li>
   	<li><a href="http://www.javascriptbank.com" >Free JavaScripts</a></li>
   	<li><a href="http://www.javascriptbank.com/">JavaScript Tutorials</a></li>
   	<li><a href="http://www.javascriptbank.com/">JavaScript Reference</a></li>

    <li><a href="http://www.javascriptbank.com/">DOM Reference</a></li>
    <li><a href="http://www.javascriptbank.com">CSS Reference</a></li>
    </ul>
</li>
<li>Web Resources
    <ul>
    <li><a href="http://www.javascriptbank.com">Dynamic HTML</a></li>
    <li><a href="http://www.javascriptbank.com">Coding Forums</a></li>

    <li><a href="http://www.javascriptbank.com">CSS Drive</a></li>
    <li><a href="http://www.javascriptbank.com">CSS Library</a></li>
    <li><a href="http://javascriptbank.com">Image Optimizer</a></li>
    <li><a href="http://javascriptbank.com">Favicon Generator</a></li>
				<li>Search Engines
        <ul>
								<li style="list-style-image: url(flip_google.gif)"><a href="http://www.google.com">Google</a></li>

								<li><a href="http://www.yahoo.com">Yahoo</a></li>
								<li><a href="http://www.altavista.com">Altavista</a></li>
								</ul>
				</li>
    </ul>
</li>
<li><a href="javascript:closeAllFlips()">Hide All</a></li>
<li><a href="javascript:openAllFlips()">Show All</a></li>

</ul>
</div>
	<!--
    	This script downloaded from www.JavaScriptBank.com
    	Come to view and download over 2000+ free javascript at www.JavaScriptBank.com
	-->