« »

This JavaScript uses some images and CSS to create navigations like to XP style. Very easy to setup, order to implement this this menu, you must define document type correctly, as <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">.

Label: XP Navigation

Report to us error of this JavaScript

Demo
Enlarge
Reload
New window

Code
Files
CSS
HTML
Print

XP_Navigation_images.zip

Copy All x2

<style type="text/css">
.header_main
{
	padding-top: 15px;
	padding-bottom: 5px;
	float: left;
	position: relative;
	width: 100%;
}
.bg_menu
{
	float: left;
	width: 100%;
	height: 20px;
	BACKGROUND: url(bg_menu_main.gif);
	padding-top: 7px;
}
.main_menu
{
	margin: 0px;
	FLOAT: left;
	padding-left: 110px;
	LIST-STYLE-TYPE: none;
}
.main_menu LI
{
	padding-left: 2px;
	padding-right: 5px;
	BACKGROUND: url(bg_menu_left.gif) no-repeat left;
	FLOAT: left;
}
.main_menu LI DIV
{
	BACKGROUND: url(bg_menu_right.gif) no-repeat right;
	height: 20px;
	FLOAT: left;
	padding-right: 2px;
}
.main_menu A
{
	float: left;
	background: url(bg_menu.gif);
	height: 15px;
	padding: 3px 5px 2px 5px;
	color: #99ff99;
	text-decoration: none;
}
.main_menu A:hover
{
	float: left;
	BACKGROUND: url(bg_head.gif);
	height: 15px;
	padding: 3px 5px 2px 5px;
	color: white;
	text-decoration: none;
}
</style>
	<!--
    	This script downloaded from www.JavaScriptBank.com
    	Come to view and download over 2000+ free javascript at www.JavaScriptBank.com
	-->

Copy All x2

<div class=header_main>
	<div class=bg_menu>
		<ul class=main_menu>
			<li><div><a href="http://javascriptbank.com/">Home</a></div></li>
			<li><div><a href="http://javascriptbank.com/4rum/">Forum</a></div></li>
			<li><div><a href="http://javascriptbank.com/javascript/">JavaScript</a></div></li>
			<li><div><a href="http://javascriptbank.com/service/">Services</a></div></li>
			<li><div><a href="http://javascriptbank.com/javascript/submit-javascript-bank.html">Submit script</a></div></li>
			<li><div><a href="http://javascriptbank.com/thietkeweb/javascriptmall/">Documentary</a></div></li>
			<li><div><a href="http://javascriptbank.com/javascript/contact-javascript-bank.html">Contact us</a></div></li>
			<li><div><a href="http://javascriptbank.com/javascript/aboutus-javascript-bank.html">About us</a></div></li>
		</ul>
	</div>
</div>
	<!--
    	This script downloaded from www.JavaScriptBank.com
    	Come to view and download over 2000+ free javascript at www.JavaScriptBank.com
	-->