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程序设计有所帮助。