本文实例讲述了js实现带有3d立体感的银灰色竖排折叠菜单代码。分享给大家供大家参考，具体如下：
这是一款超酷的可以用到网页左侧的银灰色竖排多级折叠菜单，可以自己为菜单加一个背景，css中预留有代码，这是比较标准和经典的一款后台管理模式的菜单，p+css结构，符合标准，修改方便，挺不错。
运行效果截图如下：
具体代码如下：
<!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en""http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"><html><head><meta http-equiv="content-type" content="text/html; charset=gb2312" /><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: 5px solid #c0c0c0; border-top: 1px solid #ffffff; border-bottom: 1px solid #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: right center;}.dt{ background-image: url(); background-repeat: no-repeat; background-position: 8px center;}.dt2{ background-image: url(); background-repeat: no-repeat; background-position: right center;}.dt4{ background-image: url(); background-repeat: no-repeat; background-position: right center;}.dt3{ background-image: ur(); background-repeat: no-repeat; background-position: right center;}*/#aboutbox { /*左侧box*/padding: 0px; margin: 0px; border: 0px;width: 190px; float: left;background: #eee;}#aboutbox dl { /*dl、dt、dd*/margin: 0px; border: 0px;border: medium none; /*不显示边框*/background:#eeeeee;background-image: url();/*背景图像，这里省略了*/background-repeat: repeat-y;background-position: left;clear: both;}#aboutbox dd {padding: 0px; margin: 0px; border: 0px;background: #eee;border-top: 1px solid #fff;border-left: 5px solid #e0e0e0;padding-right:3px;}#aboutbox ul { /*ul、li定义*/padding: 0px;margin: 0px; border: 0px;list-style-type: none; }#aboutbox li {padding: 0px; margin: 0px; border: 0px;text-align: left;text-indent: 10px;list-style:none;}#aboutbox li a {padding-left: 5px; margin: 0px; border: 0px;display: block;background: #eee;font-weight: normal;height: 22px;line-height: 22px;color: #000;border: 1px solid #eee;text-decoration: none;}#aboutbox li a:link,#aboutbox li a:visited {height: 22px;line-height: 22px;}#aboutbox li a:hover {padding-left: 5px;background-color: #e4e4e4;border: 1px solid #999999;color: #d90000;height: 22px;line-height: 22px;}#aboutbox li a:active {color: #333333;height: 22px;line-height: 22px;background: #eeeeee;}.center_tdbgall /* 中部表格背景颜色 */{background:#ffffff;}</style></head><body><table class=center_tdbgall width="191" border="0" cellspacing="0" cellpadding="0"> <tr> <td width=191 rowspan="2" valign=top class=web_left_all> <p id=aboutbox> <dl> <dt class=dt1 id=dt1 onmouseover=showbg(1) onclick=showsubmenu(1) onmouseout=showoutbg(1)><b>网站动态</b> <dd id=submenu1> <ul> <li><a href='#'>今日关注</a></li> <li><a href='#'>最新整理</a></li> <li><a href='#'>下载排行</a></li> </ul> </dd> </dt> </dl> <dl> <dt class=dt2 id=dt2 onmouseover=showbg(2) onclick=showsubmenu(2) onmouseout=showoutbg(2)><b>管理新闻</b> <dd id=submenu2> <ul> <li><a href='#'>新闻分类</a></li> <li><a href='#'>新闻列表</a></li> <li><a href='#'>审核新闻</a></li> </ul> </dd> </dt> </dl><script>function showsubmenu(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';"); }}function showbg(sid){ whichel = eval('submenu' + sid); if (whichel.style.display == 'none'){ eval("dt" + sid + ".classname='dt4';"); } else{ eval("dt" + sid + ".classname='dt3';"); }}function showoutbg(sid){ whichel = eval('submenu' + sid); if (whichel.style.display == 'none'){ eval("dt" + sid + ".classname='dt1';"); } else{ eval("dt" + sid + ".classname='dt2';"); }}</script> </p></td></tr></table></body></html>
以上就是本文的全部内容，希望对大家的学习有所帮助，更多相关内容请关注！
相关推荐：
利用javascript实现图片左右切换的效果
如何利用js实现仿微信支付弹窗功能
以上就是js实现带有3d立体感的银灰色竖排折叠菜单的代码的详细内容。