js实现精美的银灰色竖排折叠菜单
本文实例讲述了js实现精美的银灰色竖排折叠菜单。分享给大家供大家参考。具体实现方法如下：
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/>
<title>网页左边的竖式菜单</title>
<style>
body
{
background-color:#F3F3F3;
margin:0px;
font-size:9pt;
background-position:center;
text-decoration:none;
scrollbar-face-color:#f6f6f6;
scrollbar-highlight-color:#ffffff;scrollbar-shadow-color:#EEEEEE;
scrollbar-3dlight-color:#EEEEEE;scrollbar-arrow-color:#330000;
scrollbar-track-color:#f6f6f6;
scrollbar-darkshadow-color:#ffffff;
}
/*网站链接总的css定义*/
a{text-decoration:underline;}
a:link{color:#595989;}
a:visited{color:#595989;}
a:hover{color:#ff0000;}
a:active{color:#595989;}
.dt1,.dt2,.dt3,.dt4,.dt{
padding:0px;margin:0px;border:0px;padding-left:25px;
border-left:5pxsolid#c0c0c0;
border-top:1pxsolid#ffffff;
border-bottom:1pxsolid#c0c0c0;
width:auto;text-align:left;
line-height:26px;
height:26px;
background:#E0E0E0;
cursor:pointer!important;
cursor:hand;
display:block;
}
/*这里可以加入背景图片
.dt1{
background-image:url();
background-repeat:no-repeat;
background-position:rightcenter;
}
.dt{
background-image:url();
background-repeat:no-repeat;
background-position:8pxcenter;
}
.dt2{
background-image:url();
background-repeat:no-repeat;
background-position:rightcenter;
}
.dt4{
background-image:url();
background-repeat:no-repeat;
background-position:rightcenter;
}
.dt3{
background-image:ur();
background-repeat:no-repeat;
background-position:rightcenter;
}*/
#aboutbox{/*左侧box*/
padding:0px;margin:0px;border:0px;
width:190px;
float:left;
background:#eee;
}
#aboutboxdl{/*dl、dt、dd*/
margin:0px;border:0px;
border:mediumnone;/*不显示边框*/
background:#eeeeee;
background-image:url();/*背景图像，这里省略了*/
background-repeat:repeat-y;
background-position:left;
clear:both;
}
#aboutboxdd{
padding:0px;margin:0px;border:0px;
background:#eee;
border-top:1pxsolid#fff;
border-left:5pxsolid#e0e0e0;
padding-right:3px;
}
#aboutboxul{/*ul、li定义*/
padding:0px;
margin:0px;
border:0px;
list-style-type:none;
}
#aboutboxli{
padding:0px;margin:0px;border:0px;
text-align:left;
text-indent:10px;
list-style:none;
}
#aboutboxlia{
padding-left:5px;margin:0px;border:0px;
display:block;
background:#eee;
font-weight:normal;height:22px;line-height:22px;
color:#000;
border:1pxsolid#eee;
text-decoration:none;}
#aboutboxlia:link,#aboutboxlia:visited{
height:22px;line-height:22px;}
#aboutboxlia:hover{
padding-left:5px;
background-color:#e4e4e4;
border:1pxsolid#999999;
color:#D90000;height:22px;line-height:22px;}
#aboutboxlia:active{
color:#333333;height:22px;line-height:22px;background:#EEEEEE;
}
.center_tdbgall/*中部表格背景颜色*/
{
background:#ffffff;
}
</style>
</head>
<body>
<tableclass="center_tdbgall"width="191"border="0"
cellspacing="0"cellpadding="0">
<tr>
<tdwidth=191rowspan="2"valign=topclass="web_left_all">
<divid=aboutbox>
<dl>
<dtclass="dt1"id=dt1onmouseover=showbg(1)
onclick=showsubmenu(1)onmouseout=showoutbg(1)><B>网站动态</B>
<ddid=submenu1>
<ul>
<LI><Ahref='/'>今日关注</A></LI>
<LI><Ahref='/'>最新整理</A></LI>
<LI><Ahref='/'>下载排行</A></LI>
</ul>
</dd>
</dt>
</dl>
<dl>
<dtclass="dt2"id=dt2onmouseover=showbg(2)
onclick=showsubmenu(2)onmouseout=showoutbg(2)><B>管理新闻</B>
<ddid=submenu2>
<ul>
<LI><Ahref='/'>新闻分类</A></LI>
<LI><Ahref='/'>新闻列表</A></LI>
<LI><Ahref='/'>审核新闻</A></LI>
</ul>
</dd>
</dt>
</dl>
<script>
functionshowsubmenu(sid){
whichEl=eval('submenu'+sid);
if(whichEl.style.display=='none'){
eval("submenu"+sid+".style.display='';");
eval("dt"+sid+".className='dt2';");
}
else{
eval("submenu"+sid+".style.display='none';");
eval("dt"+sid+".className='dt1';");
}
}
functionshowbg(sid){
whichEl=eval('submenu'+sid);
if(whichEl.style.display=='none'){
eval("dt"+sid+".className='dt4';");
}
else{
eval("dt"+sid+".className='dt3';");
}
}
functionshowoutbg(sid){
whichEl=eval('submenu'+sid);
if(whichEl.style.display=='none'){
eval("dt"+sid+".className='dt1';");
}
else{
eval("dt"+sid+".className='dt2';");
}
}
</script>
</div></TD>
</tr>
</table>
</body>
</html>
希望本文所述对大家的javascript程序设计有所帮助。