仿QQ的下拉折疊菜單_菜單導航特效

仿騰訊QQ風格一樣的下拉菜單，可以伸縮和展開，點擊鼠標可以控制，這種菜單大部分人都很喜歡，由于結構清淅，不占用網頁布局過多的空間，基于DIV+CSS，符合WEB標準，真的很不錯哦！

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="www.w3.org/1999/xhtml">
<head>
<title>仿QQ的下拉折疊菜單</title>
<meta http-equiv="mrc-Type" mrc="text/html;charset=gb2312">
<style type="text/css">
body {font-size: 76%}
#list {width: 250px; border-top: 1px solid #000}
#list dt {text-align: center; font-weight: bold; color: #779; padding: 5px; cursor: pointer; background: #cce; border-width: 0 1px 1px 1px; border-color: #333; border-style: solid}
#list dd {margin-left: 0; display: none; padding: 20px; border-width: 0 1px 1px 1px; border-color: #333; border-style: solid}
#list dd.vis {display: block}
h2 {font-weight: bold; font-size: 1.2em}
p {margin-left: 15px; color: #666}
</style>
<script type="text/javascript">
	function all (arr, func)
	{
		for (var i=0,a; a = arr [i]; i++)
		{
			func (a);
		}
	}
	function show (event)
	{
		var e = event || window.event;
		var src = e.srcElement || e.target;
		defins = document.getElementById ('list').getElementsByTagName ('dd');
		all (defins, function (d) {if (d.className != '') {d.className = '';}});
		nextSib = src.nextSibling;
		while (nextSib.nodeType != 1)
		{
		nextSib = nextSib.nextSibling;
		}
		nextSib.className = 'vis';
	}
	function init ()
	{
		titles = document.getElementById ('list').getElementsByTagName ('dt');
		all (titles, function (t) {t.onclick = show});
	}
	window.onload = init;
</script>
</head>
<body id="summery_070825">
<dl id="list">
	<dt>星期一</dt>
	<dd class="vis">
	<h2>星期一開始了</h2>
	<p>忙碌的一周又開始了，朋友你預備好了嗎？</p>
	</dd>
	<dt>星期二</dt>
	<dd>
	<h2>星期二怎么樣呢？</h2>
	<p>是不是開始放松自己了呢？</p>
	</dd>
	<dt>星期三</dt>
	<dd>
	<h2>聽人說：</h2>
	<p>過了星期三，一天快一天！！</p>
	</dd>
	<dt>星期四</dt>
	<dd>
	<h2>研究一下AJAX</h2>
	<p>預備把網站加進AJAX</p>
	</dd>
	<dt>星期五</dt>
	<dd>
	<h2>明天就要解放了！</h2>
	<p>真是興奮，可以和老婆在一起了！期盼啊……。</p>
	</dd>
</dl>
</body>
</html>

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

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

相關菜單導航特效：

仿QQ的下拉折疊菜單_菜單導航特效

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

菜單導航特效推薦

猜你也喜歡看這些