zoukankan      html  css  js  c++  java
  • xp 左侧导航 JS

    <!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=gb2312" />
    <title>黑色多级弹出菜单 - Javascript经典专区</title>
    <style>
    body {
    margin: 7px;
    font:12px Verdana, Arial, Helvetica, sans-serif;
    }
    * {
    list-style-type: none;
    margin: 0px;
    padding: 0px;
    border: thin none;
    }
    #nav {
    position: absolute;
    font-size: 11px;
    opacity: 0.8;
    }
    #nav a {
    display: block;
    100px;
    height: 15px;
    padding: 3px 5px 12px;
    background: #666;
    color: #fff;
    text-decoration: none;
    }
    #nav a:hover {
    background: #333;
    }
    #nav li {
    float: left;
    clear: left;
    120px;
    background: #ccc;
    padding-bottom: 3px;
    }
    #nav ul {
    position: absolute;
    margin-left: 115px;
    margin-top: -30px;
    }
    #nav ul {
    display: none;
    }
    #nav li.show ul {
    display: block;
    }
    #nav li.show li ul {
    display: none;
    }
    #nav li li.show ul {
    display: block;
    }
    </style>
    <script language="javascript" type="text/javascript">

    function menuFix() {
    var sfEls = document.getElementById("nav").getElementsByTagName("li");
        for (var i=0; i<sfEls.length; i++){
            sfEls[i].onmouseover=function(){
            this.className+=(this.className.length>0? " ": "") + "show";
            }
        sfEls[i].onmouseout=function() {
            this.className=this.className.replace(new RegExp("( ?|^)show\\b"), "");
            }
        }
    }
    window.onload=menuFix;
    </script>
    </head>
    <body>
    <ul id="nav">
        <li><a>1</a><ul><li><a>1_1</a><ul><li><a>1_1_1</a></li>
        <li><a>1_1_2</a></li>
        <li><a>1_1_3</a></li>
        <li><a>1_1_4</a></li></ul></li>
        <li><a>1_2</a></li>
        <li><a>1_3</a></li>
        <li><a>1_4</a></li></ul></li>
        <li><a>2</a><ul><li><a>2_1</a></li>
        <li><a>2_2</a></li>
        <li><a>2_3</a></li>
        <li><a>2_4</a></li></ul></li>
        <li><a>3</a></li>
        <li><a>4</a></li>
    </ul>


    </body>
    </html>

  • 相关阅读:
    迭代器、生成器、装饰器(转)
    Python小数据池
    接阿里云oss有感
    VSCode快捷键
    前端跨域调请求 nginx反向代理
    Git生成密钥
    【westorm系列之二】配置格式化
    钉钉安卓端无法渲染数据
    express 写接口
    js正则匹配身份证号 有坑
  • 原文地址:https://www.cnblogs.com/xianzuoqiaoqi/p/1599195.html
Copyright © 2011-2022 走看看