JS+CSS实现精美的二级导航效果代码

下面就是讲解“JS+CSS实现精美的二级导航效果代码”的完整攻略，希望能对你有所帮助。

简介

在前端开发中，常见的网站二级导航效果是用户先点击顶部的一级导航，在鼠标悬停/点击时，顶部导航会下拉出一个垂直的下拉菜单，展示二级导航的内容，并在用户离开导航时收起下拉菜单。这种效果通常需要通过JS和CSS结合实现。

实现步骤

1. 首先创建一个HTML页面，用ul和li标签实现顶部导航和下拉菜单的结构。
2. 为顶部导航和下拉菜单添加样式，其中下拉菜单需要设置为隐藏，等待触发事件时才会显示出来。
3. 为顶部导航添加事件监听器，当用户进行鼠标悬停/点击事件时，显示和隐藏下拉菜单。
4. 为下拉菜单添加动态效果，例如鼠标悬停时颜色变化等。

示例1：只使用CSS实现下拉菜单

HTML代码

<nav>
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a>
      <ul>
        <li><a href="#">Our Team</a></li>
        <li><a href="#">Our History</a></li>
        <li><a href="#">Our Mission</a></li>
      </ul>
    </li>
    <li><a href="#">Products</a>
      <ul>
        <li><a href="#">Product 1</a></li>
        <li><a href="#">Product 2</a></li>
        <li><a href="#">Product 3</a></li>
      </ul>
    </li>
    <li><a href="#">Services</a>
      <ul>
        <li><a href="#">Service 1</a></li>
        <li><a href="#">Service 2</a></li>
        <li><a href="#">Service 3</a></li>
      </ul>
    </li>
    <li><a href="#">Contact Us</a></li>
  </ul>
</nav>

CSS代码

nav ul {
  margin: 0;
  padding: 0;
}

nav ul li {
  display: inline-block;
  position: relative;
}

nav ul ul {
  display: none;
}

nav ul li:hover > ul {
  display: inherit;
}

nav ul ul ul {
  margin-left: 100%;
  top: 0;
}

nav ul ul li {
  position: relative;
}

nav ul ul li a {
  background-color: #fff;
  color: #000;
  width: 200px;
  padding: 5px 0;
  text-align: center;
  border-bottom: 1px solid #ddd;
}

nav ul ul li a:hover {
  background-color: #ddd;
}

示例2：使用JS实现下拉菜单的切换

HTML代码

<nav>
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a>
      <ul>
        <li><a href="#">Our Team</a></li>
        <li><a href="#">Our History</a></li>
        <li><a href="#">Our Mission</a></li>
      </ul>
    </li>
    <li><a href="#">Products</a>
      <ul>
        <li><a href="#">Product 1</a></li>
        <li><a href="#">Product 2</a></li>
        <li><a href="#">Product 3</a></li>
      </ul>
    </li>
    <li><a href="#">Services</a>
      <ul>
        <li><a href="#">Service 1</a></li>
        <li><a href="#">Service 2</a></li>
        <li><a href="#">Service 3</a></li>
      </ul>
    </li>
    <li><a href="#">Contact Us</a></li>
  </ul>
</nav>

CSS代码

nav ul {
  margin: 0;
  padding: 0;
}

nav ul li {
  display: inline-block;
  position: relative;
}

nav ul ul {
  display: none;
}

nav ul li:hover > ul {
  display: inherit;
}

nav ul ul ul {
  margin-left: 100%;
  top: 0;
}

nav ul ul li {
  position: relative;
}

nav ul ul li a {
  background-color: #fff;
  color: #000;
  width: 200px;
  padding: 5px 0;
  text-align: center;
  border-bottom: 1px solid #ddd;
}

nav ul ul li a:hover {
  background-color: #ddd;
}

JS代码

var dropDownMenu = document.querySelectorAll('nav ul li');

//遍历菜单项并为其绑定事件
for (var i = 0; i < dropDownMenu.length; i++) {
  //为鼠标悬停事件绑定事件监听器
  dropDownMenu[i].addEventListener('mouseover', function() {
    this.querySelector('ul').style.display = 'block';
  });
  //为鼠标移出事件绑定事件监听器
  dropDownMenu[i].addEventListener('mouseout', function() {
    this.querySelector('ul').style.display = 'none';
  });
}

总结

通过上述攻略，我们可以了解到通过JS和CSS的结合，可以实现精美的二级导航效果。CSS可以帮助我们实现下拉菜单的样式，JS则可以帮助我们实现下拉菜单的切换功能。我们可以在以上示例的基础上，自己尝试进行更加细致的功能优化和样式调整，使网站导航看起来更加舒适美观。