用户登录  |  用户注册
首 页源码下载网络学院最新源码源码排行屏蔽广告
当前位置:新兴网络 > 网络学院 > 网页制作 > 网页特效

仿QQ风格折叠菜单

减小字体 增大字体 作者:佚名  来源:本站整理  发布时间:2010-08-10 19:56:12
点击下载附件.rar
HTML code运行代码复制代码编辑
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="author" content="雷晓宝,张瑾" />
<meta name="language" content="zh-cn" />
<meta name="copyright" content="&copy;2005 lxbzj.com" />
<meta name="date" content="2005-10-21" />
<meta name="Reply-to" content="lxbzmy@163.com" />
<title>管理菜单</title>
<script language="JavaScript" type="text/javascript" src="/img/201008/QQ/navbar.js"></SCRIPT>
<link href="/img/201008/QQ/navbar-qq.css" rel="stylesheet" type="text/css" />
</head>
<body>
<script language="JavaScript" type="text/JavaScript">
var show = true;
var hide = false;
//修改菜单的上下箭头符号
function my_on(head,body)
{
    head.className="tit_on";
}
function my_off(head,body)
{
    head.className="tit";
}
//添加菜单   
window.onload=function()
{
    m1 =new Menu("menu1",'menu1_child','dtu','100',show,my_on,my_off);
    m1.init();
    m2 =new Menu("menu2",'menu2_child','dtu','100',hide,my_on,my_off);
    m2.init();
    m3 =new Menu("menu3",'menu3_child','dtu','100',hide,my_on,my_off);
    m3.init();
    m4 =new Menu("menu4",'menu4_child','dtu','100',hide,my_on,my_off);
    m4.init();
    m5 =new Menu("menu5",'menu5_child','dtu','100',hide,my_on,my_off);
    m5.init();
    m6 =new Menu("menu6",'menu6_child','dtu','100',hide,my_on,my_off);
    m6.init();
    m7 =new Menu("menu7",'menu7_child','dtu','100',show,my_on,my_off);
    m7.init();
    var bar = new navbar('dtu',10,60);
    bar.add('bar_1','bar_cld_1');
    bar.add('bar_2','bar_cld_2');
    bar.add('bar_3','bar_cld_3');
    bar.init();
}
</SCRIPT>
<noscript title="系统提示">
<div class="tit" id="menu0" ><a href=""  title="折叠菜单" name="nojs" id="nojs" >系统提示</a> </div>
    <div class="list" id="menu0_child">
        <p><strong>您的设备不支持js,不能使用菜的折叠功能</strong></p>
    </div>
</noscript>
<div class="qq_outer">
    <div class="qq_in">
        <div class="bar" id="bar_1">系统功能</div>
        <div id="bar_cld_1" style="height:300px;">
            <div>
                <div class="tit" id="menu1" title="菜单标题"> <a href="#nojs" title="折叠菜单" target="" id="menu1_a" tabindex="1" >用户功能</a> </div>
                <div class="list" id="menu1_child" title="菜单功能区" >
                    <ul>
                        <li id="m1_1" ><a href="#">注册信息</a></li>
                        <li id="m1_2" ><a href="#">我的文档</a></li>
                        <li id="m1_3" ><a href="#">回收站</a></li>
                        <li id="m1_4" ><a href="#">控制面板</a></li>
                    </ul>
                </div>
                <div class="tit" id="menu2" title="菜单标题" > <a href="#nojs" title="折叠菜单" target="" id="menu2_a" tabindex="2">系统设置</a> </div>
                <div class="list" id="menu2_child" title="菜单功能区">
                    <ul>
                        <li id="m2_1" ><a href="#">环境变量</a></li>
                        <li id="m2_2" ><a href="#">执行SQL</a></li>
                        <li id="m2_3" ><a href="#">回收站</a></li>
                        <li id="m2_4" ><a href="#">控制面板</a></li>
                    </ul>
                </div>
                <div class="tit" id="menu3" title="菜单标题" > <a href="" title="折叠菜单" target="" id="menu3_a" tabindex="3">分类管理</a> </div>
                <div class="list" id="menu3_child" title="菜单功能区">
                    <ul>
                        <li id="m3_1" ><a href="#">友情链接</a></li>
                        <li id="m3_2" ><a href="#">文章分类</a></li>
                        <li id="m3_3" ><a href="#">相册分类</a></li>
                    </ul>
                </div>
                <div class="tit" id="menu4" title="菜单标题" > <a href="" title="折叠菜单" target="" id="menu4_a" tabindex="4">文章管理</a> </div>
                <div class="list" id="menu4_child" title="菜单功能区">
                    <ul>
                        <li id="m4_1" ><a href="#">文章管理</a></li>
                        <li id="m4_2" ><a href="#">添加文章</a></li>
                        <li id="m4_3" >评论管理</li>
                        <li id="m4_4" ><a href="#">添加图片</a></li>
                        <li id="m4_5" >管理相册</li>
                    </ul>
                </div>
                <div class="tit" id="menu5" title="菜单标题" > <a href="" title="折叠菜单" target="" id="menu5_a" tabindex="5">数据库维护</a> </div>
                <div class="list" id="menu5_child" title="菜单功能区">
                    <ul>
                        <li id="m5_1" ><a href="#">备份</a></li>
                        <li id="m5_2" ><a href="#">执行SQL</a></li>
                        <li id="m5_3" ><a href="#">还原</a></li>
                        <li id="m5_4" >管理相册</li>
                    </ul>
                </div>
                <div class="tit" id="menu6" title="菜单标题" > <a href="" title="折叠菜单" id="menu6_a" tabindex="6">生成html</a> </div>
                <div class="list" id="menu6_child" title="菜单功能区">
                    <ul>
                        <li id="m6_1" ><a href="#">网站统计</a></li>
                        <li id="m6_2" ><a href="#">文章目录</a></li>
                        <li id="m6_3" ><a href="#">友情连接</a></li>
                    </ul>
                </div>
                <div class="tit" id="menu7" title="菜单标题" > <a href="" title="折叠菜单" id="menu7_a" tabindex="6">关于</a> </div>
                <div class="list" id="menu7_child" title="菜单功能区">
                    <ul id="auth" >
                        <li>作者:雷晓宝</li>
                        <li>网址:<a href="http://www.lxbzj.com/">lxbzj.com</a></li>
                        <li>版本:2.3</li>
                        <li>时间:2006-04-13</li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="bar" id="bar_2">我的好友</div>
        <div id="bar_cld_2" style="height:300px; width:154px;overflow: auto;" >
            <p>&nbsp;</p>
        </div>
        <div class="bar" id="bar_3">黑名单</div>
        <div id="bar_cld_3" style="height:300px; width:154px;overflow: auto;" >
            <p>&nbsp;</p>
        </div>
    </div>
</div>
</body>

</html>

Tags:QQ风格 折叠菜单

作者:佚名
  • 好的评价 如果您觉得此文章好,就请您
      0%(0)
  • 差的评价 如果您觉得此文章差,就请您
      0%(0)

网络学院评论评论内容只代表网友观点,与本站立场无关!

   评论摘要(共 0 条,得分 0 分,平均 0 分) 查看完整评论