JS+CSS打造高仿XP默认主题菜单样式
代码简介：JS+CSS打造高仿XP默认主题菜单样式
代码内容：
<!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>
<title>JS+CSS打造高仿XP默认主题菜单样式_网页代码站(www.webdm.cn)</title>
<style type="text/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(http://www.webdm.cn/images/20100918/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(http://www.webdm.cn/images/20100918/arrow_up.gif);/*向上的箭头-暗色*/
}
.on:hover{
background-image: url(http://www.webdm.cn/images/20100918/arrow_up_o.gif);/*向上的箭头-亮色*/
}
.off{
background-image: url(http://www.webdm.cn/images/20100918/arrow_down.gif);/*向下的箭头-暗色*/
}
.off:hover{
background-image: url(http://www.webdm.cn/images/20100918/arrow_down_o.gif);/*向下的箭头-亮色*/
}
/*标题图标样式*/
.titpic {
position: absolute;
height: 32px;
width: 32px;
left: 0px;
bottom: 0px;
}
/*每一个标题图标，可变的部分*/
#pc1{
background: url(http://www.webdm.cn/images/20100918/pepo.png) no-repeat;
}
#pc2{
background: url(http://www.webdm.cn/images/20100918/st.png) no-repeat;
}
#pc3{
background: url(http://www.webdm.cn/images/20100918/ring.png) no-repeat;
}
#pc4{
background: url(http://www.webdm.cn/images/20100918/pic.png) no-repeat;
}
#pc5{
background: url(http://www.webdm.cn/images/20100918/mv.png) no-repeat;
}
#pc6{
background: url(http://www.webdm.cn/images/20100918/up.png) no-repeat;
}
#pc7{
background: url(http://www.webdm.cn/images/20100918/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(http://www.webdm.cn/images/20100918/bgmv.png);
}
/*#menu2_child{
background-image:url(images/bgring.png);
}
*/#menu3_child{
background-image:url(http://www.webdm.cn/images/20100918/bgring.png);
}
#menu4_child{
background-image:url(http://www.webdm.cn/images/20100918/bgpic.png);
}
#menu5_child{
background-image:url(http://www.webdm.cn/images/20100918/bgmv.png);
}
/*每一个列表前的，列表图标*/
#m1_1{
list-style-image:url(http://www.webdm.cn/images/20100918/1.gif);
}
#m1_2{
list-style-image:url(http://www.webdm.cn/images/20100918/2.gif);
}
#m1_3{
list-style-image:url(http://www.webdm.cn/images/20100918/5.gif);
}
#m1_4{
list-style-image:url(http://www.webdm.cn/images/20100918/4.gif);
}
/*2*/
#m2_1{
list-style-image:url(http://www.webdm.cn/images/20100918/1.gif);
}
#m2_2{
list-style-image:url(http://www.webdm.cn/images/20100918/2.gif);
}
#m2_3{
list-style-image:url(http://www.webdm.cn/images/20100918/3.gif);
}
#m2_4{
list-style-image:url(http://www.webdm.cn/images/20100918/4.gif);
}
/*3*/
#m3_1{
list-style-image:url(http://www.webdm.cn/images/20100918/1.gif);
}
#m3_2{
list-style-image:url(http://www.webdm.cn/images/20100918/2.gif);
}
#m3_3{
list-style-image:url(http://www.webdm.cn/images/20100918/3.gif);
}
#m3_4{
list-style-image:url(http://www.webdm.cn/images/20100918/4.gif);
}
/*4*/
#m4_1{
list-style-image:url(http://www.webdm.cn/images/20100918/1.gif);
}
#m4_2{
list-style-image:url(http://www.webdm.cn/images/20100918/2.gif);
}
#m4_3{
list-style-image:url(http://www.webdm.cn/images/20100918/11.gif);
}
#m4_4{
list-style-image:url(http://www.webdm.cn/images/20100918/3.gif);
}
#m4_5{
list-style-image:url(http://www.webdm.cn/images/20100918/4.gif);
}
/*5*/
#m5_1{
list-style-image:url(http://www.webdm.cn/images/20100918/1.gif);
}
#m5_2{
list-style-image:url(http://www.webdm.cn/images/20100918/2.gif);
}
#m5_3{
list-style-image:url(http://www.webdm.cn/images/20100918/3.gif);
}
#m5_4{
list-style-image:url(http://www.webdm.cn/images/20100918/4.gif);
}
/*6*/
#m6_1{
list-style-image:url(http://www.webdm.cn/images/20100918/1.gif);
}
#m6_2{
list-style-image:url(http://www.webdm.cn/images/20100918/2.gif);
}
#m6_3{
list-style-image:url(http://www.webdm.cn/images/20100918/3.gif);
}
#m6_4{
list-style-image:url(http://www.webdm.cn/images/20100918/4.gif);
}
</style>
<script language="JavaScript" type="text/javascript">
// 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/false
this.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/false
this.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-n
Interval=
{
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 处理结束
</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>
<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>
<br>
<p><a href="http://www.webdm.cn">网页代码站</a> - 最专业的代码下载网站 - 致力为中国站长提供有质量的代码！</p>
代码来自：http://www.webdm.cn/webcode/99c0c72c-5bb9-40b7-b798-5bdda83f8ec6.html
