js實現精美的銀灰色豎排折疊菜單

2024-05-06 16:20:27

字體：大中小

來源：轉載

供稿：網友

這篇文章主要介紹了js實現精美的銀灰色豎排折疊菜單,可實現頁面左側豎排的縱向折疊菜單效果,非常美觀實用,需要的朋友可以參考下

本文實例講述了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>