非常漂亮的下拉菜单代码.
[size=4]非常漂亮的下拉菜单代码.只是有一点点问题.有时下拉菜单收不回去的.请高手指点一下.不胜感激!!!!! <html><head><title>?????????-??????</title>
<style>
.mnu { font-family: "Verdana"; font-size: 9pt; color: #FFFFFF; text-align: center; font-weight: bold; width: 130px}
.childmnu { font-family: "Verdana"; font-size: 9pt; color: #FFFFFF; padding-left: 15px}
.mnuover { font-family: "Verdana"; font-size: 9pt; color: #000000; background-color: #CCCCCC; text-align: center; cursor: hand; width: 130px}
.cmover { font-family: "Verdana"; font-size: 9pt; color: #000000; background-color: #CCCCCC; padding-left: 15px; cursor: hand}
.10p { font-family: "Verdana"; font-size: 10pt}
.9p { font-family: "Verdana"; font-size: 9pt}
a:hover { font-family: "Verdana"; font-size: 9pt; color: #555555; text-decoration: underline}
a { font-family: "Verdana"; font-size: 9pt; text-decoration: none; color: #000000
} </style></head>
<script>
var oTimerShow,oTimerHide;
oTimerShow=oTimerHide="";
function showMenu(pID){
iTemp=pID;
document.all[iTemp].style.display=""
if(oTimerHide!=""){
clearTimeout(oTimerHide);
oTimerHide="";
}
if(document.all[iTemp+'_1'].filters.alpha.opacity<100){
document.all[iTemp+'_1'].filters.alpha.opacity+=10;
document.all[iTemp+'_2'].filters.alpha.opacity+=5;
document.all[iTemp+'_2'].style.posHeight+=8;
document.all[iTemp+'_1'].style.posHeight+=9;
//document.all[iTemp].style.posHeight+=10;
oTimerShow=setTimeout("showMenu('"+iTemp+"')",25);
}else{
clearTimeout(oTimerShow)
oTimerShow=""
} } function closeMenu(pID){
iTemp=pID;
if(oTimerShow!=""){
clearTimeout(oTimerShow)
oTimerShow=""
}
if(document.all[iTemp+'_1'].filters.alpha.opacity>0){
document.all[iTemp+'_1'].filters.alpha.opacity-=10;
document.all[iTemp+'_2'].filters.alpha.opacity-=5;
document.all[iTemp+'_2'].style.posHeight-=8;
document.all[iTemp+'_1'].style.posHeight-=9;
//document.all[iTemp].style.posHeight-=10;
oTimerHide=setTimeout("closeMenu('"+iTemp+"')",25);
}else{
clearTimeout(oTimerHide)
oTimerHide=""
document.all[iTemp].style.display="none"
}
} function drawTbl(){
var i,strWH="",para=drawTbl.arguments
//for(i=0;i<para.length;i++)
strWH="width='"+para[0]+"' height='"+para[0]+"'";
strTbl=(
"<table border='0' cellspacing='0' cellpadding='0' bgcolor='#DD0000'>"
+"<tr>"
+"<td colspan='3' "+strWH+"></td>"
+"<td bgcolor='#FFFFFF' "+strWH+"></td>"
+"<td colspan='2' "+strWH+"></td>"
+"</tr>"
+"<tr> "
+"<td height='6' "+strWH+"></td>"
+"<td bgcolor='#FFFFFF' "+strWH+"></td>"
+"<td "+strWH+"></td>"
+"<td "+strWH+"></td>"
+"<td bgcolor='#FFFFFF' "+strWH+"></td>"
+"<td bgcolor='#FFFFFF' rowspan='3' "+strWH+"></td>"
+"</tr>"
+"<tr> "
+"<td colspan='2' "+strWH+"></td>"
+"<td bgcolor='#FFFFFF' colspan='2' "+strWH+"></td>"
+"<td "+strWH+"></td>"
+"</tr>"
+"<tr> "
+"<td colspan='3' "+strWH+"></td>"
+"<td bgcolor='#FFFFFF' colspan='2' "+strWH+"></td>"
+"</tr>"
+"</table>"
);
document.write(strTbl);
}
</script>
<body leftmargin="0" topmargin="8" myTitle=":::Welcome to Wrclub.net::..">
<table width="50%" border="1" cellspacing="0" cellpadding="0" style="border-collapse: collapse" height="25" bgcolor="#DD0000" bordercolor="#000000"><tr>
<td class="mnu" onMouseOver="showMenu('mnuLayer_01');this.className='mnuover'" onMouseOut="closeMenu('mnuLayer_01');this.className='mnu'" myTitle="Welcome To WrClub.net">Wrclub.net</td> <td class="mnu" onMouseOver="showMenu('mnuLayer_02');this.className='mnuover'" onMouseOut="closeMenu('mnuLayer_02');this.className='mnu'" myTitle="Welcome To WrClub.net">Wrclub.net</td> <td>
<div id="mnuLayer_01" style="position:absolute; left:0px; top:32px; width:140px; height:100px; display:none; overflow:hidden">
<div id="mnuLayer_01_1" style="position:absolute; left:0px; top:0px; width:130px; height:0px; z-index:2; filter:alpha(opacity=0); overflow:hidden; " onMouseOver="showMenu('mnuLayer_01');this.className='mnuover'" onMouseOut="closeMenu('mnuLayer_01')">
<table width="100%" border="1" cellspacing="0" cellpadding="0" style="border-collapse: collapse" height="90" bgcolor="#DD0000" bordercolor="#000000">
<tr>
<td class="childmnu" onMouseOver="this.className='cmover'" onMouseOut="this.className='childmnu'" myTitle="::Study Center::..">Study Center</td>
</tr>
<tr>
<td class="childmnu" onMouseOver="this.className='cmover'" onMouseOut="this.className='childmnu'" myTitle="::Down Center::..">Down Center</td>
</tr>
<tr>
<td class="childmnu" onMouseOver="this.className='cmover'" onMouseOut="this.className='childmnu'" myTitle="::Templete Center::..">Templete Center</td>
</tr>
<tr>
<td class="childmnu" onMouseOver="this.className='cmover'" onMouseOut="this.className='childmnu'" myTitle="::BBs::.."> BBs </td>
</tr>
</table>
</div>
<div id="mnuLayer_01_2" style="position:absolute; left:0px; top:5px; width:126px; height:0px; z-index:1; background-color: black; filter:alpha(opacity=0) progid:DXImageTransform.Microsoft.MotionBlur(strength=5, direction=310) progid:DXImageTransform.Microsoft.Blur(pixelradius=5); overflow:hidden"></div>
</div>
</td> <td>
<div id="mnuLayer_02" style="position:absolute; left:129px; top:32px; width:140px; height:100px; display:none; overflow:hidden">
<div id="mnuLayer_02_1" style="position:absolute; left:0px; top:0px; width:130px; height:0px; z-index:2; filter:alpha(opacity=0); overflow:hidden; " onMouseOver="showMenu('mnuLayer_02');this.className='mnuover'" onMouseOut="closeMenu('mnuLayer_02')">
<table width="100%" border="1" cellspacing="0" cellpadding="0" style="border-collapse: collapse" height="90" bgcolor="#DD0000" bordercolor="#000000">
<tr>
<td class="childmnu" onMouseOver="this.className='cmover'" onMouseOut="this.className='childmnu'" myTitle="::Study Center::..">Study Center</td>
</tr>
<tr>
<td class="childmnu" onMouseOver="this.className='cmover'" onMouseOut="this.className='childmnu'" myTitle="::Down Center::..">Down Center</td>
</tr>
<tr>
<td class="childmnu" onMouseOver="this.className='cmover'" onMouseOut="this.className='childmnu'" myTitle="::Templete Center::..">Templete Center</td>
</tr>
<tr>
<td class="childmnu" onMouseOver="this.className='cmover'" onMouseOut="this.className='childmnu'" myTitle="::BBs::.."> BBs </td>
</tr>
</table>
</div>
<div id="mnuLayer_02_2" style="position:absolute; left:0px; top:5px; width:126px; height:0px; z-index:1; background-color: black; filter:alpha(opacity=0) progid:DXImageTransform.Microsoft.MotionBlur(strength=5, direction=310) progid:DXImageTransform.Microsoft.Blur(pixelradius=5); overflow:hidden"></div>
</div>
</td>
</tr></tabvle></body>
</html>
[/size]
|