« »

This code creates navigation menus with CSS stylesheet and operations are similar to Windows XP. Additionally, this code also uses cookie to store the state of the menus, and the fade effect is optional, you can turned it off.

See also: Switch Menu script.

Label: XP Style, switch, navigation, CSS stylesheet, operation, Windows, cookie, store, state, fade

Report to us error of this JavaScript

Demo
Enlarge
Reload
New window

Code
Files
CSS
HTML
Print

Copy All x2

<link rel="stylesheet" type="text/css" href="sddm.css" />

Copy All x2

<div style="text-align: left; width: 70%;">
<div class="navbar">
<!-- *********************************Start Menu****************************** -->
<div class="mainDiv" >
<div class="topItem" >Demo Menu 1</div>        
<div class="dropMenu" ><!-- -->
	<div class="subMenu" style="display:inline;">
		<div class="subItem"><a href="#">Configuration</a></div>
	        <div class="subItem"><a href="#">Tool Box</a></div>
		<div class="subItem"><a href="#">Contact Us</a></div>
		<div class="subItem"><a href="#">Sub Menu 4</a></div>
		<div class="subItem"><a href="#">Sub Menu 5</a></div>
	</div>
</div>
</div>
<!-- *********************************End Menu****************************** -->
<br>
<!-- *********************************Start Menu****************************** -->
<div class="mainDiv" >
<div class="topItem"  >Demo Menu 2</div>        
<div class="dropMenu" ><!-- -->
	<div class="subMenu" style="display:none;">
		<div class="subItem"><a href="#">Configuration</a></div>
		<div class="subItem"><a href="#">Sub Menu 2</a></div>
		<div class="subItem"><a href="#">Sub Menu 3</a></div>
		<div class="subItem"><a href="#">Sub Menu 4</a></div>
        </div>
</div>
</div>
<!-- *********************************End Menu****************************** -->
<script type="text/javascript" src="xpmenuv21.js" author="Eric Simmons" url="http://www.jswitch.com"></script>
</div>