zoukankan      html  css  js  c++  java
  • 仿腾讯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的紫色下拉折叠菜单代码_网页代码站(www.webdm.cn)</title>
    <meta http-equiv="content-Type" content="text/html;charset=gb2312">
    <style type="text/css">
    body {font-size: 76%}
    #list { 250px; border-top: 1px solid #000}
    #list dt {text-align: center; font-weight: bold; color: #779; padding: 5px; cursor: pointer; background: #cce; 
    
    border- 0 1px 1px 1px; border-color: #333; border-style: solid}
    #list dd {margin-left: 0; display: none; padding: 20px; border- 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>
    <br>
    <p><a href="http://www.webdm.cn">网页代码站</a> - 最专业的代码下载网站 - 致力为中国站长提供有质量的代码!</p>
    

    代码来自:http://www.webdm.cn/webcode/2770d651-7bc2-4d3c-a17b-5f642eca9fb8.html

  • 相关阅读:
    jQuery UI DatePicker用法和中文设置
    jQuery的ajax方法
    jQuery遍历复杂的JSON数据
    JavaScript面向对象的写法
    jpa
    日志
    全局异常的处理!
    oracle表空间
    plsql的连接配置
    pLsql使用
  • 原文地址:https://www.cnblogs.com/webdm/p/2006401.html
Copyright © 2011-2022 走看看