• JS+CSS类似QQ好友/黑名单的树型菜单


    代码简介:

    这个菜单堪称极品啊,不过里面的有些图标丢失了,路径还留在那,真想使用的朋友自己制作两个折叠菜单的图标按路径传上去就行了,这个菜单是模仿QQ面板的菜单功能,很多朋友还是很喜欢这种功能的,没想到用这么少的JS代码也可实现 ,值得代签哦。

    代码内容:

    View Code
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
    <HTML>
    <HEAD>
    <TITLE>JS+CSS类似QQ好友/黑名单的树型菜单_网页代码站(www.webdm.cn)</TITLE>
    </HEAD>
    <BODY>
    <script>
    if (!document.getElementById)
        document.getElementById 
    = function() { return null; }
    function initializeMenu(menuId, actuatorId) {
        var menu 
    = document.getElementById(menuId);
        var actuator 
    = document.getElementById(actuatorId);
        
    if (menu == null || actuator == nullreturn;
        actuator.parentNode.style.backgroundImage 
    = "url()";
        actuator.onclick 
    = function() {
            var display 
    = menu.style.display;
            
    this.parentNode.style.backgroundImage =
                (display 
    == "block"? "url()" : "url()";
            menu.style.display 
    = (display == "block"? "none" : "block";
            
    return false;
        }
    }
     window.onload 
    = function() {
                initializeMenu(
    "productsMenu""productsActuator");
                initializeMenu(
    "newPhonesMenu""newPhonesActuator");
                initializeMenu(
    "compareMenu""compareActuator");
            }
    </script>
    <style>
    body {
      font
    -family: verdana, helvetica, arial, sans-serif;
    }
    #mainMenu {
      background
    -color: #EEE;
      border: 1px solid #CCC;
      color: #
    000;
       203px;
    }
    #menuList {
      margin: 0px;
      padding: 10px 0px 10px 15px;
    }
    li.menubar {
      background: url() no
    -repeat 0em 0.3em;
      font
    -size: 12px;
      line
    -height: 1.5em;
      list
    -style: none outside;
    }
    .menu, .submenu {
      display: none;
      margin
    -left: 15px;
      padding: 0px;
    }
    .menu li, .submenu li {
      background: url() no
    -repeat 0em 0.3em;
      list
    -style: none outside;
    }
    a.actuator {
      background
    -color: transparent;
      color: #
    000;
      font
    -size: 12px;
      padding
    -left: 15px;
      text
    -decoration: none;
    }
    a.actuator:hover {
      text
    -decoration: underline;
    }
    .menu li a, .submenu li a {
      background
    -color: transparent;
      color: #
    000;
      font
    -size: 12px;
      padding
    -left: 15px;
      text
    -decoration: none;
    }
    .menu li a:hover, submenu li a:hover {
      text
    -decoration: underline;
    }
    span.key {
      text
    -decoration: underline;
    }
    </style>
    </head>
    <body>
    <div id="mainMenu">
          
    <ul id="menuList">
            
    <li class="menubar">
              
    <a href="#" id="productsActuator" class="actuator">图秀地带收藏夹</a>
              
    <ul id="productsMenu" class="menu">
                
    <li>
                  
    <a href="#" id="newPhonesActuator" class="actuator">我的好友</a>
                  
    <ul id="newPhonesMenu" class="submenu">
                    
    <li><a href="#">张三[10000001]</a></li>
                    
    <li><a href="#">李四[10000002]</a></li>
                    
    <li><a href="#">张三[10000001]</a></li>
                    
    <li><a href="#">李四[10000002]</a></li>
                  
    </ul>
                
    </li>
                
    <li>
                  
    <a href="#" id="compareActuator" class="actuator">陌生人</a>
                  
    <ul id="compareMenu" class="submenu">
                    
    <li><a href="#">张三[10000001]</a></li>
                    
    <li><a href="#">李四[10000002]</a></li>
                    
    <li><a href="#">张三[10000001]</a></li>
                    
    <li><a href="#">李四[10000002]</a></li>
                  
    </ul>
                
    </li>
              
    </ul>
            
    </li>
          
    </ul>
        
    </div>
    <br />
    <p><a href="http://www.webdm.cn">网页代码站</a> - 最专业的网页代码下载网站 - 致力为中国站长提供有质量的网页代码!</p>
      
    </body>
    </BODY>
    </HTML>
    代码来自:http:
    //www.webdm.cn/webcode/e0728af5-2dde-4d97-92af-5fd8d98c3d39.html
  • 相关阅读:
    Centos安装webbench
    schema://host[:port#]/path/.../[?query-string][#anchor]
    ab压力测试报错: apr_socket_recv: Connection reset by peer (104)
    Nginx配置proxy_pass转发的/路径问题
    压力测试的轻量级具体做法
    jquery删除动态增加的li
    css如何li中选中后加上class属性js控制
    JQuery中两个ul标签的li互相移动实现方法
    xcode生成的IOS安装文件的位置
    xcode生成文件路径
  • 原文地址:https://www.cnblogs.com/webdm/p/2120673.html
Copyright © 2020-2023  润新知