仿腾讯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 {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>
<br>
<p><a href="http://www.webdm.cn">网页代码站</a> - 最专业的代码下载网站 - 致力为中国站长提供有质量的代码！</p>

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

posted @   网页代码站  阅读(308)  评论(0)  编辑  收藏  举报
编辑推荐：
· 从二进制到误差：逐行拆解C语言浮点运算中的4008175468544之谜
· .NET制作智能桌面机器人：结合BotSharp智能体框架开发语音交互
· 软件产品开发中常见的10个问题及处理方法
· .NET 原生驾驭 AI 新基建实战系列：向量数据库的应用与畅想
· 从问题排查到源码分析：ActiveMQ消费端频繁日志刷屏的秘密
阅读排行：
· C# 13 中的新增功能实操
· Vue3封装支持Base64导出的电子签名组件
· 万字长文详解Text-to-SQL
· Ollama本地部署大模型总结
· 【杭电多校比赛记录】2025“钉耙编程”中国大学生算法设计春季联赛（4）
点击右上角即可分享
微信分享提示
AI原生IDE