javascript实现控制的多级下拉菜单

[复制链接]
查看: 59|回复: 2
  • 慵懒
    2018-4-28 09:37
  • 发表于 2018-4-3 09:46:29 | 显示全部楼层 |阅读模式

    马上注册,结交更多好友,享用更多功能,让你轻松玩转社区。

    您需要 登录 才可以下载或查看,没有帐号?立即注册

    x

    这篇文章主要介绍了javascript实现控制的多级下拉菜单,包含示例代码,效果非常不错,这里推荐给大家。

      最近身体不适,所以没能如期的更新,抱歉。这里直接把代码贴上,如果有不明白的地方,留言就行。

      ?

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    112
    113
    114
    115
    116
    117
    118
    <!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>
    <title>下拉菜单</title>
    <meta http-equiv="content-Type" content="text/html;charset=utf-8">
    <style type="text/css">
    .navi ul {
    padding: 0;
    list-style-type: none;
    }
    .navi ul li {
    text-align: center;
    float: left;
    position: relative;
    width: 200px;
    background-color: #0F8CFF;
    }
    a {
    color: #086808;
    text-decoration: none;
    }
    .navi ul li a {
    display: block;
    border: 1px solid #fff;
    }
    .navi ul li ul {
    display: none;
    left: 0;
    }
    .navi ul li ul li ul{
    position: absolute;
    left:200px;
    top: 0;
    }
    .navi ul li:hover ul a {
    color: yellow;
    }
    </style>

    <script type="text/javascript">
    function showNextMenu(obj){
    var nextMenu = obj.getElementsByTagName("ul")[0];
    nextMenu.style.display = "block";
    }
    function hideNextMenu(obj){
    var nextMenu = obj.getElementsByTagName("ul")[0];
    nextMenu.style.display = "none";
    }
    </script>
    </head>

    <body>

    <div class="navi">
    <ul >
    <li class="li_1">
    <a href="javascript:;" >游戏</a>
    <ul>
    <li>
    <a href="javascript:;" >传奇</a>

    <ul>
    <li>
    <a href="javascript:;" >1</a>
    </li>
    <li>
    <a href="javascript:;" >2</a>
    </li>
    <li>
    <a href="javascript:;" >3</a>
    </li>
    </ul>
    </li>
    <li>
    <a href="javascript:;" >传奇</a>
    </li>
    <li>
    <a href="javascript:;" >传奇</a>
    </li>
    <li>
    <a href="javascript:;" >传奇</a>
    </li>
    <li>
    <a href="javascript:;" >传奇</a>
    </li>
    </ul>
    </li>
    <li class="li_1">
    <a href="javascript:;" >游戏</a>
    <ul>
    <li>
    <a href="javascript:;" >传奇</a>
    </li>
    </ul>
    </li>
    <li class="li_1">
    <a href="javascript:;" >游戏</a>
    <ul>
    <li>
    <a href="javascript:;" >传奇</a>
    </li>
    </ul>
    </li>
    <li class="li_1">
    <a href="javascript:;" >游戏</a>
    <ul>
    <li>
    <a href="javascript:;" >传奇</a>
    </li>
    </ul>
    </li>
    </ul>
    </div>

    </body>

    </html>

      效果图如下:

      以上所述就是本文的全部内容了,希望大家能够喜欢。

    发表于 2018-8-5 15:55:46 | 显示全部楼层
    确实是难得好帖啊,顶先
    回复

    使用道具 举报

    发表于 2018-8-27 00:28:30 | 显示全部楼层
    这个帖一般般,还可以哦。
    回复

    使用道具 举报

    您需要登录后才可以回帖 登录 | 立即注册

    本版积分规则

     
     
    技术支持
    在线客服
    售后交流群瑞恩社区™售后</font><br><span>交流
    工作时间:
    8:00-18:00
    客服热线:
    15368564009
    微信扫一扫
    返回顶部 关注微信 下载APP 返回列表