zoukankan      html  css  js  c++  java
  • JavaScript实现的文字折叠菜单代码

    代码简介:

    JavaScript纯文字折叠菜单,类似淘宝网一样的管理菜单,非常纯净,如果你想为每个菜单加上背景,你可以修改CSS中调用的一个GIF图,改变图片的样式就可以改变背景,实用方便。

    代码内容:

    <html>
    <head>
    <title>JavaScript实现的文字折叠菜单代码_网页代码站(www.webdm.cn)</title>
    <script type="text/javascript"> 
    <!-- 
    function getObject(objectId) { 
     if(document.getElementById && document.getElementById(objectId)) { 
     return document.getElementById(objectId); 
     } 
     else if (document.all && document.all(objectId)) { 
     return document.all(objectId); 
     } 
     else if (document.layers && document.layers[objectId]) { 
     return document.layers[objectId]; 
     } 
     else { 
     return false; 
     } 
    } 
    ///
    function showHide(e,objname){     
        var obj = getObject(objname); 
        if(obj.style.display == "none"){ 
            obj.style.display = "block"; 
            e.className="xias"; 
        }else{ 
            obj.style.display = "none"; 
            e.className="rights"; 
        } 
    } 
    --> 
    </script> 
    <style type="text/css"> 
    body { font-size:12px; margin:20px; padding:0; text-align:left;} 
    dl,dt,dd,ul,ol,li,p,div,input,h1,h2,h3,h4,h5,h6 { margin:0; padding:0;} 
    li { list-style:none;} 
    .libiao_menu { margin-bottom:15px;} 
    .libiao_menu h3 a { margin-top:15px; margin-bottom:15px; display:block; 130px; height:28px; font-size:14px; text-align:left; padding-
    
    left:65px; padding-top:13px; color:#0066cc;} 
    .libiao_menu dl { margin-left:30px; margin-top:5px;} 
    .libiao_menu dl dt { font-size:14px; line-height:24px;} 
    .libiao_menu dl dt a { padding-left:13px; color:#333;} 
    .libiao_menu dl dt a.rights { background:url(http://www.webdm.cn/images/20090919/dots.gif) no-repeat 0 3px;} 
    .libiao_menu dl dt a.xias { background:url(http://www.webdm.cn/images/20090919/dots.gif) no-repeat 0 -41px;} 
    .libiao_menu dl dd { padding-left:20px;} 
    .libiao_menu dl dd ul {} 
    .libiao_menu dl dd ul li { font-size:14px; line-height:24px;} 
    .libiao_menu dl dd ul li a { color:#06c;} 
    </style>
    </head>
    <body> 
    <div class="libiao_menu"> 
            <dl> 
                <dt><a href="#" class="xias" onclick="showHide(this,'items0');">我的网上订单</a></dt> 
                <dd id="items0" style="display: block;"> 
                    <ul> 
                        <li><a href="#">所有订单</a></li> 
                        <li><a href="#">未付款订单</a></li> 
                        <li><a href="#">处理中的订单</a></li> 
                    </ul> 
                </dd> 
            </dl> 
            <dl> 
                <dt><a href="#" class="xias" onclick="showHide(this,'items1');">帐户管理</a></dt> 
                <dd id="items1" style="display: block;"> 
                    <ul> 
                        <li><a href="#">我的余额</a></li> 
                        <li><a href="#">管理地址</a></li> 
                    </ul> 
                </dd> 
            </dl> 
            <dl> 
                <dt><a href="#" class="xias" onclick="showHide(this,'items2');">我的个人助手</a></dt> 
                <dd id="items2" style="display: block;"> 
                    <ul> 
                        <li><a href="#">我的收藏夹</a></li> 
                        <li><a href="#">我的购物记录</a></li> 
                    </ul> 
                </dd> 
            </dl> 
            <dl> 
                <dt><a href="#" class="xias" onclick="showHide(this,'items3');">个人信息管理</a></dt> 
                <dd id="items3" style="display: block;"> 
                    <ul> 
                        <li><a href="#">编辑资料</a></li> 
                        <li><a href="#">修改密码</a></li> 
                    </ul> 
                </dd> 
            </dl> 
        </div>
    </body>
    </html>
    <br>
    <a href="http://www.webdm.cn">网页代码站</a> - 最专业的代码下载网站 - 致力为中国站长提供有质量的代码!
    

    代码来自:http://www.webdm.cn/webcode/a491fefa-b762-4858-ad76-a12a436e3b0d.html

  • 相关阅读:
    自己实现迭代器
    Python基础教程(入门教程),30分钟玩转Python编程!!
    centos7安装python 与卸载python
    docker 批量导入本地 tar 镜像包的 sao 操作
    无线路由器信道怎么设置 无线路由器信道选择哪个好
    关于打包压缩几种格式(gzip,bzip2,xz)的试验对比
    linux 长期运行程序的 四种方法
    win10快捷键大全 win10常用快捷键
    linux bg和fg命令
    Apache htpasswd命令用法详解
  • 原文地址:https://www.cnblogs.com/webdm/p/1980385.html
Copyright © 2011-2022 走看看