您的位置:首页 > Web前端 > JavaScript

【js效果】下拉菜单

2021-04-07 21:14 44 查看 https://blog.51cto.com/1514226

目录

  • 鼠标经过展开下拉菜单[ul]方法一
  • 方法二
[/ul]


鼠标经过展开下拉菜单

方法一

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>js实现下拉二级菜单</title>
    <style>
      * {
        margin: 0px;
        padding: 0px;
      }
      body {
        font-family: Verdana, Geneva, sans-serif;
        font-size: 14px;
      }
      #nav {
        width: 600px;
        height: 40px;
        background-color: #eee;
        margin: 0 auto;
      }
      ul {
        list-style: none;
      }
      ul li {
        float: left;
        line-height: 40px;
        text-align: center;
        width: 100px; /*ie7显示宽度的兼容性 设置width 而不用padding的自适应 */
      }  
      a {
        text-decoration: none;
        color: #000;
        display: block;
      }
      a:hover {
        color: #f00;
        background-color: #666;
      }
      ul li ul li {
        float: none;
        background-color: #eee;
        margin: 2px 0px;
      }
      ul li ul {
        display: none;
      }
    </style>
  </head>
  <body>
    <div id="nav">
      <ul>
        <li><a href="#">首页</a></li>
        <li onmouseover="ShowSub(this)" onmouseout="HideSub(this)">
          <a href="#">课程大厅</a>
          <ul>
            <li><a href="#">JavaScript</a></li>
            <li><a href="#">Html/CSS</a></li>
          </ul>
        </li>
        <li onmouseover="ShowSub(this)" onmouseout="HideSub(this)">
          <a href="#">学习中心</a>
          <ul>
            <li><a href="#">视频学习</a></li>
            <li><a href="#">实例练习</a></li>
            <li><a href="#">问与答</a></li>
          </ul>
        </li>
        <li><a href="#">经典案例</a></li>
        <li><a href="#">关于我们</a></li>
      </ul>
    </div>

    <script>
      function ShowSub(li) {
        //函数定义
        var subMenu = li.getElementsByTagName("ul")[0]; //获取
        subMenu.style.display = " block ";
      }
      function HideSub(li) {
        var subMenu = li.getElementsByTagName("ul")[0];
        subMenu.style.display = " none ";
      }
    </script>
  </body>
</html>

方法二

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <style type="text/css">
        * {
            margin: 0px;
        }

        a{
            text-decoration: none;
            font-size: 16px;
            color: #333;
        }
        #nav {
            width: 700px;
            height: 40px;
            background: #ddd;
            margin: 20px auto;
        }

        #nav ul {
            list-style: none;
        }

        #nav ul li {
            width: 120px;
            float: left;
        }

        #nav ul li a {
            display: block;
            text-align: center;
            line-height: 40px;
        }

        #nav ul li a:hover {
            background: #CCCCDD;
        }

        #nav ul li div {
            font-size: 18px;
            display: none;

        }

        #nav ul li div a {
            line-height: 40px;
            text-align: center;
            background: #ddd;
        }

        #nav ul li div a:hover {
            background: #FF9090;
        }
    </style>
</head>

<body>
    <div id="nav">
        <ul>
            <li>
                <a href="#">首页</a>
            </li>
            <li>
                <a href="#">课程大厅</a>
                <div>
                    <a href="#">JavaScript</a>
                    <a href="#">html/css</a>
                    <a href="#">Bootstrap</a>
                </div>
            </li>
            <li>
                <a href="">学习中心</a>
                <div>
                    <a href="#">视频中心</a>
                    <a href="#">实例练习</a>
                    <a href="#">问与答</a>
                </div>
            </li>
            <li><a href="#">经典案例</a></li>
            <li><a href="#">关于我们</a></li>
        </ul>
    </div>
    <script type="text/javascript">
        window.onload = function () {
            var aLi = document.getElementById("nav").getElementsByTagName("li");
            for (var i = 0; i < aLi.length; i++) {

                aLi[i].onmouseover = function () {
                    if( this.children[1]){
                        this.children[1].style.display = 'block';//选取当前li元素的第二个子元素
                    }
                }
                aLi[i].onmouseout = function () {
                    if( this.children[1]){
                        this.children[1].style.display = 'none';
                    }
                }
            }
        }
    </script>
</body>

</html>
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: