JS仿QQ的展開/折疊菜單_菜單導航特效

仿QQ菜單風格一樣的下拉菜單，點擊后展開或折疊，可以無窮擴展菜單單元，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>
<title>仿QQ展開菜單</title>
<meta http-equiv="mrc-type" mrc="text/html;charset=gb2312">
<style type="text/css">
table{width:100px;overflow:hidden;}
#control,#control table,#control table td{font-size:12px;}
#control{width:100px;background-color:#ccc;font-size:12px;color:#333333;text-align:center;}
#control table{width:100px;height:20px;overflow:hidden;}
#control table li{list-style:none;height:20px;line-height:20px;overflow:hidden;}
#control table .tabTit{background:#E0E8B8;}
#control a{font-weight:normal;font-size:24px;color:#6F7848;text-decoration:none;padding-right:10px;}
#control .testLink{font-weight:bold;font-size:12px;}
.test{width:100px;background-color:#f6f6f6;overflow:hidden;}
.test li{list-style:none;color:#000;font-size:13px;line-height:20px;}
#control table,.test table{margin:0 auto;text-align:center;}
.style1{font-size:8px;color:#fff;}
</style>
<script language="javascript">
function $G(Read_Id) { return document.getElementById(Read_Id) }
var openedObjId=null
function Effect(ObjectId){
	if (openedObjId){
		$G(openedObjId+"tab").innerHTML = "<a href=# >+</a>";
		Start(openedObjId,'Close');
	}
	if(openedObjId!=ObjectId){
		$G(ObjectId+"tab").innerHTML = "<a href=#>-</a>";
		Start(ObjectId,'Opens');
		openedObjId=ObjectId
	}
	else openedObjId=null
}
function Start(ObjId,method){
var BoxHeight = $G(ObjId).offsetHeight; //對象高度
var MinHeight = 5;//定義最小高度
var MaxHeight = 130;//定義最大高度
var BoxAddMax = 1;//遞增量初始值
var Every_Add = 0.15;//每次的遞(減)增量[數值越大速度越快]
var Reduce    = (BoxAddMax - Every_Add);
var Add       = (BoxAddMax + Every_Add);
//折疊
if (method == "Close"){
var Alter_Close = function(){//構建虛擬的[遞減]循環
	BoxAddMax /= Reduce;
	BoxHeight -= BoxAddMax;
	if (BoxHeight <= MinHeight){
		$G(ObjId).style.display = "none";
		window.clearInterval(BoxAction);
	}
	else $G(ObjId).style.height = BoxHeight;
}
var BoxAction = window.setInterval(Alter_Close,1);
}
//展開
else if (method == "Opens"){
var Alter_Opens = function(){
	BoxAddMax *= Add;
	BoxHeight += BoxAddMax;
	if (BoxHeight >= MaxHeight){
		$G(ObjId).style.height = MaxHeight;
		window.clearInterval(BoxAction);
	}else{
	$G(ObjId).style.display= "block";
	$G(ObjId).style.height = BoxHeight;
	}
}
var BoxAction = window.setInterval(Alter_Opens,1);
}
}
</script>
</head>
<body>
<div id="control">
  <table width="100%" border="0" cellpadding="0" cellspacing="0">
    <tr>
<td width="100%" align="center" class="tabTit" onClick="Effect('test');"><li id="testtab" style="float:right"><a href="/">+</a></li><li style="float:left"><a href="#" class="testLink">模板無憂</a></li></td>
    </tr>
  </table>
</div>
<div id="test" class="test" style="display:none;">
  <table width="100%" border="0" cellpadding="4" cellspacing="0" bgcolor="#EEEEEE">
    <tr>
      <td colspan="3" align="center" valign="top"><ul><li><a href="/sort/list_5_80_1.shtml">游戲娛樂</a></li><li><a href="/sort/list_5_82_1.shtml">媒體網絡</a></li><li><a href="/sort/list_5_99_1.shtml">窗體界面</a></li><li><a href="/sort/list_5_102_1.shtml">算法相關</a></li></ul></td>
    </tr>
  </table>
</div>
<br>
<div id="control">
  <table width="100%" border="0" cellpadding="0" cellspacing="0">
    <tr>
      <td width="100%" align="center" class="tabTit" onClick="Effect('test1');" ><li id="test1tab" style="float:right"><a href="#">+</a></li><li style="float:left"><a href="#"class="testLink">JAVA源代碼</a></li></td>
    </tr>
  </table>
</div>
<div id="test1" class="test" style="display:none;">
  <table width="100%" border="0" cellpadding="4" cellspacing="0" bgcolor="#EEEEEE">
    <tr>
      <td colspan="3" align="center" valign="top"><ul><li><a href="/sort/list_5_93_1.shtml">系統相關</a></li><li><a href="/sort/list_5_90_1.shtml">綜合應用</a></li><li><a href="/sort/list_5_89_1.shtml">文件操縱</a></li></ul></td>
    </tr>
  </table>
</div>
<br>
<div id="control">
  <table width="100%" border="0" cellpadding="0" cellspacing="0">
    <tr>
      <td width="100%" align="center" class="tabTit" onClick="Effect('test2');"><li id="test2tab" style="float:right"><a href="#">+</a></li><li style="float:left"><a href="#" class="testLink">JAVA源代碼</a></li></td>
    </tr>
  </table>
</div>
<div id="test2" class="test" style="display:none;">
  <table width="100%" border="0" cellpadding="4" cellspacing="0" bgcolor="#EEEEEE">
    <tr>
      <td colspan="3" align="center" valign="top"><ul><li><a href="/sort/list_5_88_1.shtml">書籍源碼</a></li><li><a href="/sort/list_5_101_1.shtml">初學實例</a></li><li><a href="/sort/list_5_220_1.shtml">類庫組件</a></li></ul></td>
    </tr>
  </table>
</div>
</body>
</html>

所屬頻道：菜單導航特效/更新時間：2010-05-22

[收藏][報錯][返回列表]

相關菜單導航特效：

JS仿QQ的展開/折疊菜單_菜單導航特效

菜單導航特效Rss訂閱特效代碼搜索

菜單導航特效推薦

猜你也喜歡看這些