原生JS实现下拉菜单操作

最新推荐文章于 2024-05-15 15:39:09 发布

前端wikc

最新推荐文章于 2024-05-15 15:39:09 发布

阅读量2.4k

点赞数 3

文章标签： javascript 前端

本文链接：https://blog.csdn.net/qq_64469057/article/details/128395422

版权

原生JavaScript实现下拉菜单的操作
逻辑分析：
（1）该布局实现分为两个部分，导航栏部分以及下拉菜单部分，因此我们需要使用标签的嵌套，一共使用两对ul和li标签，外面的ul构成导航栏的框架，在li里面一一对应另一对ul和li,在内层中书写对应的下拉菜单项；
（2）在导航栏中，每个li都需要添加鼠标经过效果，因此需要用到for循环注册鼠标事件；
（3）核心思想：添加鼠标移入移出事件，当鼠标经过 li 里面的第二个孩子（内层的ul)时，使ul显示出来，当鼠标离开时，再将对应的ul隐藏起来。

完整代码如下：

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

<head>
  <meta charset="UTF-8">
  <title>下拉菜单</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    li {
      list-style-type: none;
    }

    a {
      text-decoration: none;
      font-size: 14px;
    }

    .nav {
      margin-top: 100px;
      transform: translateX(-50%);
      position: absolute;
      left: 50%;
    }

    .nav li {
      position: relative;
      float: left;
      width: 80px;
      height: 41px;
      text-align: center;
      background-color: rgb(250, 250, 250);

    }

    .nav>li {
      border: 1px solid #348868;
    }

    .nav li a {
      display: block;
      width: 100%;
      height: 100%;
      line-height: 41px;
      color: #333;

    }

    .nav li a:hover {
      background-color: rgb(109, 108, 108);
    }

    .nav ul {
      display: none;
      position: absolute;
      top: 41px;
      left: 0;
      width: 100%;
      border-left: 1px solid #348868;
      border-right: 1px solid #348868;
    }

    .nav ul li {
      border-bottom: 1px solid #348868;
    }

    .nav ul li a:hover {
      background-color: #348868;
    }
  </style>
</head>

<body>
  <ul class="nav">
    <li>
      <a href="#">导航栏1</a>
      <ul>
        <li>
          <a href="">菜单1</a>
        </li>
        <li>
          <a href="">菜单2</a>
        </li>
        <li>
          <a href="">菜单3</a>
        </li>
      </ul>
    </li>
    <li>
      <a href="#">导航栏2</a>
      <ul>
        <li>
          <a href="">菜单1</a>
        </li>
        <li>
          <a href="">菜单2</a>
        </li>
        <li>
          <a href="">菜单3</a>
        </li>
      </ul>
    </li>
    <li>
      <a href="#">导航栏3</a>
      <ul>
        <li>
          <a href="">菜单1</a>
        </li>
        <li>
          <a href="">菜单2</a>
        </li>
        <li>
          <a href="">菜单3</a>
        </li>
      </ul>
    </li>
    <li>
      <a href="#">导航栏4</a>
      <ul>
        <li>
          <a href="">菜单1</a>
        </li>
        <li>
          <a href="">菜单2</a>
        </li>
        <li>
          <a href="">菜单3</a>
        </li>
      </ul>
    </li>
  </ul>
  <script>
    // 1. 获取元素
    var nav = document.querySelector('.nav');
    var lis = nav.children; // 得到4个小li
    // 2.循环注册事件
    for (var i = 0; i < lis.length; i++) {
      lis[i].onmouseover = function () {
        this.children[1].style.display = 'block';  // 节点获取第二个子孩子，将ul显示出来
      }
      lis[i].onmouseout = function () {
        this.children[1].style.display = 'none';
      }
    }
  </script>
</body>

</html>