XP默认主题菜单样式特效代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 XP默认主题菜单样式特效代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>XP默认主题菜单样式（另2种）</title>
<meta name="author" content="雷晓宝，张瑾" />
<meta name="language" content="zh-cn" />
<meta name="copyright" content="&copy;2005 lxbzj.com" />
<meta name="date" content="2005-10-21" />
<meta name="Reply-to" content="lxbzmy@163.com" />
<meta name="description" content="这是管理导航菜单，遵循xhtml，点击标题隐藏内容，基于DOM的脚本。" />
<meta name="description" content="我已经设置了文档的基础链接为mainFrame,使用时可以自己修改。" />
<meta name="robots" content="None" />
<meta name="Keywords" content="menu navbar" />
<meta name="pragma" content="no-cache" />
<meta name="document-class" content="Completed" />
<meta name="cache-control" content="Private" />
<title>管理菜单</title>
<link href="navbar.css" rel="stylesheet" type="text/css" />
<script language="JavaScript" type="text/javascript" src="navbar.js"></script>
</head>
<body>
<script language="JavaScript" type="text/JavaScript">
var show = true;
var hide = false;
//修改菜单的上下箭头符号
function my_on(head,body)
{
	var tag_a;
	for(var i=0;i<head.childNodes.length;i++)
	{
		if (head.childNodes[i].nodeName=="A")
		{
			tag_a=head.childNodes[i];
			break;
		}
	}
	tag_a.className="on";
}
function my_off(head,body)
{
	var tag_a;
	for(var i=0;i<head.childNodes.length;i++)
	{
		if (head.childNodes[i].nodeName=="A")
		{
			tag_a=head.childNodes[i];
			break;
		}
	}
	tag_a.className="off";
}
//添加菜单	
window.onload=function()
{
	m1 =new Menu("menu1",'menu1_child','dtu','100',show,my_on,my_off);
	m1.init();
	m2 =new Menu("menu2",'menu2_child','dtu','100',hide,my_on,my_off);
	m2.init();
	m3 =new Menu("menu3",'menu3_child','dtu','100',hide,my_on,my_off);
	m3.init();
	m4 =new Menu("menu4",'menu4_child','dtu','100',hide,my_on,my_off);
	m4.init();
	m5 =new Menu("menu5",'menu5_child','dtu','100',hide,my_on,my_off);
	m5.init();
	m6 =new Menu("menu6",'menu6_child','dtu','100',hide,my_on,my_off);
	m6.init();
	m7 =new Menu("menu7",'menu7_child','dtu','100',show,my_on,my_off);
	m7.init();
}
</script>
<noscript title="系统提示">
<div class="tit" id="menu0" ><a href="" class="on"  title="折叠菜单" name="nojs" id="nojs" >系统提示</a> </div>
<div class="list" id="menu0_child">
	<p><strong>您的设备不支持js,不能使用菜的折叠功能</strong></p>
</div>
</noscript>
<p><a href="index.html">XP 默认主题样式</a> <a href="navbar-pix.htm">xp-pixos样式</a> <a href="navbar-qq.htm">QQ2006样式 </a></p>
<div id="menu">
	<div class="tit" id="menu1" title="菜单标题">
		<div class="titpic" id="pc1"></div>
		<a href="#nojs" title="折叠菜单" target="" class="on" id="menu1_a" tabindex="1" >用户功能</a> </div>
	<div class="list" id="menu1_child" title="菜单功能区" >
		<ul>
			<li id="m1_1" ><a href="#">注册信息</a></li>
			<li id="m1_2" ><a href="#">我的文档</a></li>
			<li id="m1_3" ><a href="#">回收站</a></li>
			<li id="m1_4" ><a href="#">控制面板</a></li>
		</ul>
	</div>
	<div class="tit" id="menu2" title="菜单标题" >
		<div class="titpic" id="pc2"></div>
		<a href="#nojs" title="折叠菜单" target="" class="on" id="menu2_a" tabindex="2">系统设置</a> </div>
	<div class="list" id="menu2_child" title="菜单功能区">
		<ul>
			<li id="m2_1" ><a href="#">环境变量</a></li>
			<li id="m2_2" ><a href="#">执行SQL</a></li>
			<li id="m2_3" ><a href="#">回收站</a></li>
			<li id="m2_4" ><a href="#">控制面板</a></li>
		</ul>
	</div>
	<div class="tit" id="menu3" title="菜单标题" >
		<div class="titpic" id="pc3"></div>
		<a href="" title="折叠菜单" target="" class="on" id="menu3_a" tabindex="3">分类管理</a> </div>
	<div class="list" id="menu3_child" title="菜单功能区">
		<ul>
			<li id="m3_1" ><a href="#">友情链接</a></li>
			<li id="m3_2" ><a href="#">文章分类</a></li>
			<li id="m3_3" ><a href="#">相册分类</a></li>
		</ul>
	</div>
	<div class="tit" id="menu4" title="菜单标题" >
		<div class="titpic" id="pc4"></div>
		<a href="" title="折叠菜单" target="" class="on" id="menu4_a" tabindex="4">文章管理</a> </div>
	<div class="list" id="menu4_child" title="菜单功能区">
		<ul>
			<li id="m4_1" ><a href="#">文章管理</a></li>
			<li id="m4_2" ><a href="#">添加文章</a></li>
			<li id="m4_3" >评论管理</li>
			<li id="m4_4" ><a href="#">添加图片</a></li>
			<li id="m4_5" >管理相册</li>
		</ul>
	</div>
	<div class="tit" id="menu5" title="菜单标题" >
		<div class="titpic" id="pc5"></div>
		<a href="" title="折叠菜单" target="" class="on" id="menu5_a" tabindex="5">数据库维护</a> </div>
	<div class="list" id="menu5_child" title="菜单功能区">
		<ul>
			<li id="m5_1" ><a href="#">备份</a></li>
			<li id="m5_2" ><a href="#">执行SQL</a></li>
			<li id="m5_3" ><a href="#">还原</a></li>
			<li id="m5_4" >管理相册</li>
		</ul>
	</div>
	<div class="tit" id="menu6" title="菜单标题" >
		<div class="titpic" id="pc6"></div>
		<a href="" title="折叠菜单" class="on" id="menu6_a" tabindex="6">生成html</a> </div>
	<div class="list" id="menu6_child" title="菜单功能区">
		<ul>
			<li id="m6_1" ><a href="#">网站统计</a></li>
			<li id="m6_2" ><a href="#">文章目录</a></li>
			<li id="m6_3" ><a href="#">友情连接</a></li>
		</ul>
	</div>
	<div class="tit" id="menu7" title="菜单标题" >
		<div class="titpic" id="pc7"></div>
		<a href="" title="折叠菜单" class="on" id="menu7_a" tabindex="6">关于</a> </div>
	<div class="list" id="menu7_child" title="菜单功能区">
		<ul id="auth" >
			<li>作者：雷晓宝</li>
			<li>网址：<a href="http://www.lxbzj.com/">lxbzj.com</a></li>
			<li>版本：2.3</li>
			<li>时间：2006-04-13</li>
		</ul>
	</div>
</div>
</body>
</html>

JS代码(navbar.js):

// JavaScript Document/*======================================== *文件名：navbar.js *编 码： Utf-8 *功 能：实现菜单折叠的javaScript *作 者：雷晓宝 *版 本:2.3 *时 间：2006-03-07===========================================*/
//========================定义menu类==================;
	function Menu(head,child,dir,speed,init_state,ext_on,ext_off){
	this.head = document.getElementById(head);
	//菜单头this.body = document.getElementById(child);
	//菜单体this.direction = dir;
	//菜单收起的方向this.speed = speed;
	//速度this.ext_on = ext_on;
	//扩展菜单展开调用this.ext_off = ext_off;
	//扩展菜单收起调用this.init_state = init_state;
	//设置菜单的初始状态 true/falsethis.a = 10;
	//加速度//私用变量;
	this._interval = false;
	this._last_state = false;
	this._size = false;
	this._temp = false;
	this._js = false;
	this._div = false;
	this._parent = false;
	this._parent_control = false;
	var self = this;
	var temp = new Array(null,null);
	//temp[0]用来给_off()用，temp[1]用来给_on()用//=============================方法=============================//点击事件处理this.click = function(e){
	if (self._parent_control){
	self._parent._control(self);
	return false;
}
else{
	Interval.clear(self._interval);
	if (self._last_state == false){
	self._on();
	return false;
}
else{
	self._off();
	return false;
}
}
}
//初始化this.init = function(){
	this.head.onclick = this.click;
	this.head.onkeypress = function(e){
	e||(e=window.event);
	if (!(e.keyCode ==32 || e.keyCode == 0))return;
	//alert(':)');
	self.click();
}
for(var i=0;
	i<this.body.childNodes.length;
	i++){
	if (this.body.childNodes[i].nodeType==1){
	this._div=this.body.childNodes[i];
	break;
}
}
if (parseInt(this.body.style.height))//this.body.style.getPropertyCSSValue('height')this.body.currentStyle.height{
	this._size = parseInt(this.body.style.height);
}
else{
	this._size = this._div.offsetHeight;
}
switch (this.init_state){
	case true:if (this.body.style.display == 'none'){
	//this._last_state = false;
	this._on();
}
else{
	this._last_state = true;
}
break;
	default://case false:if (this.body.style.display !='none'){
	this._last_state = true;
	this._off();
}
break;
}
}
//展开菜单this._on = function(){
	if (self._last_state == false){
	self._last_state = true;
	self.body.style.display="";
	temp[1] = self.a?2*parseInt(Math.sqrt(self.a*self._size))+1:self._size/5;
	if (isNaN(parseInt(self.body.style.height)))self.body.style.height="0px";
	if (self.ext_on){
	self.ext_on(self.head,self.body)}
self._interval = Interval.set(self._action_on,speed);
}
//setTimeout('slowon("'+self.body.id+'")',5)}
//收起菜单this._off = function(){
	if (self._last_state == true){
	self._last_state = false;
	//if (temp[0] == null)//{
	temp[0]=self.a?2*parseInt(Math.sqrt(self.a*self._size))+1:self._size/5;
	;
	//}
if(isNaN(parseInt(self.body.style.height)))self.body.style.height = self._size+'px';
	if (self.ext_off){
	self.ext_off(self.head,self.body)}
self._interval = Interval.set(self._action_off,this.speed);
}
}
//以下处理滑动this._action_on = function(){
	if (parseInt(self.body.style.height)+temp[1]>self._size){
	self.body.style.height = self._size+'px';
	Interval.clear(self._interval);
}
else{
	self.body.style.height = parseInt(self.body.style.height)+temp[1]+'px';
	temp[1] +=self.a;
}
}
this._action_off = function(){
	if(parseInt(self.body.style.height)-temp[0]<0){
	Interval.clear(self._interval);
	self.body.style.display = "none";
}
else{
	self.body.style.height = parseInt(self.body.style.height)-temp[0]+'px';
	temp[0]-=self.a;
}
}
}
//meanu类结束//====================定义Navbar类，用来管理一组menu集合===============================function navbar(dir,a,speed,ext_on,ext_off){
	this.open_only_one = true;
	//这组menu在任何时刻是否只有一个在开启，true/falsethis.dir = dir;
	//menu组的公共方向，既然是一组menu它们应该有相同的方向吧？this.a =a;
	//menu公共加速度this.speed =speed;
	//公共速度this.ext_on = ext_on;
	//公共扩展打开函数调用this.ext_off = ext_off;
	//公共的扩展收起函数调用this.menu_item = new Array();
	//menu组this._openning;
	//如果只允许打开一个菜单，这个就会记录当前打开的菜单this.open_all = function()//{
}
;
	this.add = function (head,body)//添加menu的函数{
	var temp = new Menu(head,body,this.dir,this.speed,this.ext_on,this.ext_off);
	this.menu_item.push(temp);
}
;
	this.init = function ()//Navbar的初始化函数，必须在add完成后调用{
	if(this.open_only_one == true){
	//如果只允许一个打开，那么仅仅设置菜单组的第一个菜单为打开状态if (this.menu_item.length>0){
	with(this.menu_item[0]){
	init_state = true;
	_parent = this;
	//设置menu的父亲为这个Navbar_parent_control = true;
	//设置父亲来控制菜单init();
}
this._openning = this.menu_item[0];
}
for(var i = 1;
	i<this.menu_item.length;
	i++){
	//设置出第一个外的其他菜单为关闭，同时设置好其他参数with(this.menu_item[i]){
	init_state = false;
	_parent = this;
	init();
	_parent_control = true;
}
}
}
else{
	//如果open_only_one == false 那么仅仅初始化菜单for(var i = 0;
	i<this.menu_item.length;
	i++){
	this.menu_item.init();
}
}
}
;
	//额外添加的父亲控制函数this._control = function(child){
	var self =child;
	Interval.clear(self._interval);
	if (self._last_state == false){
	if (typeof(self._parent._openning) == 'object'){
	self._parent._openning._off();
	self._parent._openning = self;
}
self._on();
	return false;
}
else{
	//self._off();
	return false;
}
}
}
//Navbar类结束//===============================interval 处理=============================//注意：_stack 只有20个//扩充时必须赋初值1-nInterval={
	length:20,_action:new Array(length),_stack:new Array(0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19),_interval:Array(length),_timeout:new Array(length),//for(var i=0;
	i<_action.length;
	i++)stack.push(i);
	,set:function(action_function,speed,time_out){
	time_out = time_out?time_out:15000;
	//默认的interval超时为15000秒，如果不需要设置超时，那么将下面的setTimeout 那移行注释掉;
	var p = Interval._stack.pop();
	if(p){
	Interval._action[p] = action_function;
	Interval._interval[p]=setInterval('if(Interval._action['+p+'])Interval._action['+p+']();
	',speed);
	//这里的重复执行函数不能写成'Interval._action['+p+']'因为很可能Interval.clear以后，还有一次没有执行完毕，于是就产生了一次错误Interval._timeout[p] = setTimeout('Interval.clear('+p+')',time_out);
	//这行设置interval超时,如果不需要可注释掉;
	return p;
}
}
,clear:function(p){
	if (Interval._action[p]){
	clearInterval(Interval._interval[p]);
	clearTimeout(Interval._timeout[p]);
	//这行清除interval超时,如果没有设置超时可注释掉;
	Interval._action[p] = "";
	Interval._stack.push(p);
}
}
}
//Interval 处理结束

CSS代码(navbar.css):

@charset "utf-8";/* CSS Document */
body{background:#5c90d9;/*整个网页的背景颜色*/
}
/*.tit为每个菜单的标题样式 .list 为菜单项目的样式*/
.tit,.list{width:183px;/*菜单的宽度*/
}
/*======================================标题部分===============================*/
.tit{/*菜单标题的样式*/
height:22px;border:1px solid #2a4dab;/*边框颜色*/
border-bottom-style:none;/*底部边框没有*/
background:#547DBE url(images/menu_head_bg.gif) repeat-x;/*背景样式依次为：颜色，图片路径，横向重复*/
color:#D9E1F6;/*前景色*/
font:bold 12px/22px "lucida Grande",verdana,lucida,Arial,helvetica,"宋体",sans-serif;/*文字样式依次为：粗体 大小/行高 字族*/
text-indent:35px;/*文字缩进*/
margin-top:15px;/*外填充*/
position:relative;}
.tit a,.tit a:link,.tit a hover{/*菜单标题中的链接的样式，共同的部分*/
color:#D9E1F6;display:block;text-decoration:none;width:183px;background-repeat:no-repeat;background-position:166px 6px;cursor:pointer;}
.tit a:hover{color:#fff;/*鼠标经过时的颜色*/
}
/*====================菜单标题中的箭头图片======================*/
.on{background-image:url(images/arrow_up.gif);/*向上的箭头-暗色*/
}
.on:hover{background-image:url(images/arrow_up_o.gif);/*向上的箭头-亮色*/
}
.off{background-image:url(images/arrow_down.gif);/*向下的箭头-暗色*/
}
.off:hover{background-image:url(images/arrow_down_o.gif);/*向下的箭头-亮色*/
}
/*标题图标样式*/
.titpic{position:absolute;height:32px;width:32px;left:0px;bottom:0px;}
/*每一个标题图标，可变的部分*/
#pc1{background:url(images/pepo.png) no-repeat;}
#pc2{background:url(images/st.png) no-repeat;}
#pc3{background:url(images/ring.png) no-repeat;}
#pc4{background:url(images/pic.png) no-repeat;}
#pc5{background:url(images/mv.png) no-repeat;}
#pc6{background:url(images/up.png) no-repeat;}
#pc7{background:url(images/help.png) no-repeat;}
/*==========================================菜单体部分======================================*/
/*====================菜单列表的样式======================*/
.list{font-size:12px;color:#002280;background:#fff no-repeat right bottom;width:183px;/*宽度*/
border:1px solid #2A4DAB;text-align:left;padding:10px 10px;voice-family:"\"}
\"";voice-family:inherit;width:163px;overflow:hidden;}
html>body .list{width:163px;}
.list ul{list-style-type:none;margin:0;padding:0;padding-left:18px;}
.list li{margin:0;padding:0;padding-left:5px;}
/*============菜单链接的样式==============*/
.list a{color:#002280;text-decoration:none;}
.list a:link{color:#002280;}
.list a:hover{color:#296DC1;text-decoration:underline;}
.list a:active{color:#296DC1;}
/*每一个菜单体的背景图片可变部分*/
#menu1_child{background-image:url(images/bgmv.png);}
/*#menu2_child{background-image:url(images/bgring.png);}
*/
#menu3_child{background-image:url(images/bgring.png);}
#menu4_child{background-image:url(images/bgpic.png);}
#menu5_child{background-image:url(images/bgmv.png);}
/*每一个列表前的，列表图标*/
#m1_1{list-style-image:url(images/ico/1.gif);}
#m1_2{list-style-image:url(images/ico/2.gif);}
#m1_3{list-style-image:url(images/ico/5.gif);}
#m1_4{list-style-image:url(images/ico/4.gif);}
/*2*/
#m2_1{list-style-image:url(images/ico/1.gif);}
#m2_2{list-style-image:url(images/ico/2.gif);}
#m2_3{list-style-image:url(images/ico/3.gif);}
#m2_4{list-style-image:url(images/ico/4.gif);}
/*3*/
#m3_1{list-style-image:url(images/ico/1.gif);}
#m3_2{list-style-image:url(images/ico/2.gif);}
#m3_3{list-style-image:url(images/ico/3.gif);}
#m3_4{list-style-image:url(images/ico/4.gif);}
/*4*/
#m4_1{list-style-image:url(images/ico/1.gif);}
#m4_2{list-style-image:url(images/ico/2.gif);}
#m4_3{list-style-image:url(images/ico/11.gif);}
#m4_4{list-style-image:url(images/ico/3.gif);}
#m4_5{list-style-image:url(images/ico/4.gif);}
/*5*/
#m5_1{list-style-image:url(images/ico/1.gif);}
#m5_2{list-style-image:url(images/ico/2.gif);}
#m5_3{list-style-image:url(images/ico/3.gif);}
#m5_4{list-style-image:url(images/ico/4.gif);}
/*6*/
#m6_1{list-style-image:url(images/ico/1.gif);}
#m6_2{list-style-image:url(images/ico/2.gif);}
#m6_3{list-style-image:url(images/ico/3.gif);}
#m6_4{list-style-image:url(images/ico/4.gif);}

附件:下载该文件资源,减少时间成本(增值服务)