XP Navigation

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

Over 2000+ free Javascript

at JavaScriptBank.com Website

Sampled by JavaScriptBank.com

JavaScript Code

<style type="text/css">
/*
		    xxxxxxxxxxxxxxx   xxxxxxxxxxx     xxxx
		    xxxxxxxxxxxxxxx  xxxxxxxxxxxxx    xxxx
		    xxxxxxxxxxxxxxx  xxxxxxxxxxxxx    xxxx
		         xxxxx       xxxxxxxxxxxx     xxxx
		         xxxxx       xxxxx			  xxxx
		         xxxxx		 xxxxxxxxxxxx	  xxxx
		         xxxxx		 xxxxxxxxxxxxx	  xxxxxxxxxxx			www.JavaScriptBank.com
		         xxxxx		  xxxxxxxxxxxx	  xxxxxxxxxxxxx
		         xxxxx       		 xxxxx	  xxxx     xxxx
		   xxx   xxxxx		  xxxxxxxxxxxx    xxxx     xxxx
		   xxx  xxxxxx		 xxxxxxxxxxxxx	  xxxx     xxxx
		   xxxxxxxxxx		 xxxxxxxxxxxxx	  xxxxxxxxxxxxx
		    xxxxxxxx		  xxxxxxxxxxx      xxxxxxxxxxx
		    
		    
	XP Navigation
	Author: Thái Cao Phong
	Website: www.JavaScriptBank.com
	Please keep these comments above to contact author when you use this script. Thank you very much.
	Vietnamese: Xin ban hay giu lai nhung thong tin tren de nguoi khac co the lien he voi tac gia neu ban co 
su dung doan ma nay. Cam on ban rat nhieu.
*/
.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>

HTML Code

If you have any question or suggestion, please write to me or visit my forum
JavaScriptBank.com