本文實例講述了js實現精美的銀灰色豎排折疊菜單。分享給大家供大家參考。具體實現方法如下：
<!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><meta http-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: 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"><div 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> </div></TD></tr></table></body></html>希望本文所述對大家的javascript程序設計有所幫助。
新聞熱點
疑難解答
