script language="JavaScript" type="text/JavaScript">
var sp=12;/*滑动的速度，单位是像素，只填写数字*/
/*==============
实现开关菜单的函数
=================*/
function onoff(taga)
{
var hd=taga.parentNode;
var menu = document.getElementById(hd.id+"_child");
if (menu.style.display =="none"){
taga.className= "on";
menu.style.display="";
setTimeout("slowon(""+menu.id+"")",5);/*hda1.style.display="none";*/}
else {
/*menu.style.height="10px";*/
/*menu.style.display="none";*/
taga.className= "off";
setTimeout("slowoff(""+menu.id+"")",10);
/*hda1.style.display="";*/}
}
/*================
实现菜单滑动的函数
=================*/
function slowoff(id){/*这个实现菜单收起*/
id=document.getElementById(id);
var h = parseInt(id.style.height);
if(isNaN(h))h= id.offsetHeight;
/*if (h>0){
*/
if(h-sp>0){id.style.height=(h-sp)+"px";
setTimeout("slowoff(""+id.id+"")",5);/*}else */}
else{id.style.height="0px";
id.style.display="none";
/*id.style.height="auto";*/}
}
function slowon(id){/*这个实现菜单展开，初始条件必须是:菜单的高度="0px",不然会出错*/
var cld;
id=document.getElementById(id);
for(i=0;i<id.childNodes.length;i++){if(id.childNodes[i].nodeType==1){cld=id.childNodes[i];break;}}
var h = id.offsetHeight;
var h1=cld.offsetHeight;
id.style.height=parseInt(id.style.height)+sp+"px";
if (h1==0 || h<h1)setTimeout("slowon(""+id.id+"")",5);//通过比较内部子节点的高度与菜单的高度来判断是否已经打开完全
else{id.style.height="auto";}
}
/*=========================
在窗体载入完成后隐藏起一些菜单项
============================*/
function hidesth(){
var arr =[2,3,4,5,6,7];
for(i=0;i<arr.length;i++)
if (document.getElementById("menu"+ arr[i]+"_a")){document.getElementById("menu"+ arr[i]+"_a").onclick()//.display="none";document.getElementById("menu"+arr[i]+"_child").style.height="0px";
}
}
</script>
@charset "utf-8";
/*css定义 */
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;
}
.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);/*向下的箭头-亮色*/
}
/*====================
菜单列表的样式
======================*/
.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;
}
/*标题图标样式*/
.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;
}
#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);
}
说一下拆分过程：
先将xp截一个屏幕
然后ps里打开量了一下尺寸
把菜分成两部分：
第一部分：标题部分：
<div class="tit" id="menu2" title="菜单标题" >
<div class="titpic" id="pc2"></div>
<a href="#nojs" title="折叠菜单" target="_self" class="on" id="menu2_a" tabindex="2" onclick="onoff(this);return false" onkeypress="onoff(this)">系统设置</a>
</div>
最外面的div用来显示 外边框
里面的第一个div用来显示 那个小图片注意它的定位是绝对定位。而它的上一级div是相对定位，这样才能出来这个效果
a就不必说了
第二部分：菜单部分
<div class="list" id="menu2_child" title="菜单功能区">
<ul>
<li style="list-style-image:url(images/ico/1.gif) "><a href="#">环境变量</a></li>
<li style="list-style-image:url(images/ico/2.gif) "><a href="#" onclick="return false">执行SQL</a></li>
<li style="list-style-image:url(images/ico/3.gif) "><a href="#" onclick="return false">回收站</a></li>
<li style="list-style-image:url(images/ico/4.gif) "><a href="#" onclick="return false">控制面板</a></li>
</ul>
</div>
外面的div用来显示边框、底色、以及右下角的图标。
其他的不必说了，细细的看css文件就可以了。
