仿QQ的下拉折叠菜单

2024-09-05 12:19:28

字体：大中小

来源：转载

供稿：网友

仿腾讯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="content-Type" content="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>

上一篇：CSS 滑动门

下一篇：蓝色经典CSS导航菜单

学习交流

如何查找有故障的配件

如何查找有故障的配件...

热门图片

猜你喜欢的新闻

猜你喜欢的关注