揭秘下拉菜单的秘密，用JavaScript玩转导航栏

前端

2023-04-16 21:10:22

使用 JavaScript 打造动态优雅的下拉菜单

导航栏的魔法：JavaScript 下拉菜单

在当今注重用户体验的网络世界中，交互式元素变得越来越重要。其中，下拉菜单以其优雅的外观和便利的功能脱颖而出，成为提升网站易用性和美观性的必备利器。而 JavaScript，作为一种强大的编程语言，赋予了这些下拉菜单以生命。

打造令人惊艳的下拉菜单

要构建一个引人注目的下拉菜单，我们需要分步进行。

1. HTML 结构搭台：

在 HTML 中，我们首先使用 <nav> 元素包裹导航栏，然后使用 <ul> 和 <li> 元素创建菜单项。对于需要下拉菜单的菜单项，我们再使用 <div> 元素创建下拉菜单，并初始隐藏它。

2. CSS 点缀美化：

使用 CSS，我们可以为导航栏和下拉菜单增添美感。通过调整字体、颜色、大小和间距，我们可以让它们与网站整体风格相得益彰。

3. JavaScript 赋予生命：

JavaScript 是让下拉菜单动起来的关键。当鼠标移到菜单项上时，我们需要显示下拉菜单；当鼠标移出菜单项时，我们需要隐藏下拉菜单。我们可以使用 addEventListener() 方法来侦听鼠标事件，并使用 display 属性来控制下拉菜单的可见性。

代码示例：

<nav>
  <ul>
    <li><a href="#">主页</a></li>
    <li><a href="#">关于我们</a></li>
    <li><a href="#">产品</a>
      <div class="dropdown-menu">
        <a href="#">产品 1</a>
        <a href="#">产品 2</a>
        <a href="#">产品 3</a>
      </div>
    </li>
    <li><a href="#">联系我们</a></li>
  </ul>
</nav>

<script>
  const dropdown = document.querySelector('.dropdown-menu');
  const dropdownButton = document.querySelector('li:nth-child(3)');

  dropdownButton.addEventListener('mouseover', () => {
    dropdown.style.display = 'block';
  });

  dropdownButton.addEventListener('mouseout', () => {
    dropdown.style.display = 'none';
  });
</script>