js+css实现三级导航菜单

以下是详细的js+css实现三级导航菜单的攻略：

1. 先决条件

在开始之前，你需要具备以下技能：

• HTML 基础
• CSS 基础
• JavaScript 基础

2. HTML 结构

我们首先需要在 HTML 中构建出三级导航菜单的基本结构。结构如下：

<nav>
  <ul>
    <li><a href="#">一级菜单 1</a>
      <ul>
        <li><a href="#">二级菜单 1-1</a>
          <ul>
            <li><a href="#">三级菜单 1-1-1</a></li>
            <li><a href="#">三级菜单 1-1-2</a></li>
          </ul>
        </li>
        <li><a href="#">二级菜单 1-2</a>
          <ul>
            <li><a href="#">三级菜单 1-2-1</a></li>
            <li><a href="#">三级菜单 1-2-2</a></li>
          </ul>
        </li>
      </ul>
    </li>
    <li><a href="#">一级菜单 2</a>
      <ul>
        <li><a href="#">二级菜单 2-1</a>
          <ul>
            <li><a href="#">三级菜单 2-1-1</a></li>
            <li><a href="#">三级菜单 2-1-2</a></li>
          </ul>
        </li>
        <li><a href="#">二级菜单 2-2</a>
          <ul>
            <li><a href="#">三级菜单 2-2-1</a></li>
            <li><a href="#">三级菜单 2-2-2</a></li>
          </ul>
        </li>
      </ul>
    </li>
  </ul>
</nav>

代码中，我们创建了一个包含三级菜单的导航栏，包含三个一级菜单，每个一级菜单包含两个二级菜单，每个二级菜单包含两个三级菜单。

3. CSS 样式

然后我们需要编写 CSS 样式，来设置导航菜单的样式，包括背景、字体颜色和字体大小等。

nav ul {
  list-style: none;
  padding: 0;
  margin: 0;
  background-color: #f2f2f2;
}

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

nav ul li a {
  display: block;
  padding: 12px 24px;
  color: #333;
  font-size: 16px;
  text-decoration: none;
}

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

nav ul ul {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  background-color: #fff;
  min-width: 200px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}

nav ul ul li {
  display: block;
}

nav ul ul li a {
  display: block;
  padding: 10px 20px;
  color: #333;
  font-size: 14px;
  text-decoration: none;
}

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

通过上述代码，我们设置了三级导航菜单的基本样式，可以将代码放入一个名为 styles.css 的文件中，并在 HTML 中导入。

4. JavaScript 实现

最后我们需要使用 JavaScript 来实现导航菜单的交互功能。 JavaScript 代码如下：

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

for (var i = 0; i < dropdown.length; i++) {
  dropdown[i].classList.add('dropdown');
}

var dropdownToggle = document.querySelectorAll('nav ul li > a');

for (var i = 0; i < dropdownToggle.length; i++) {
  dropdownToggle[i].addEventListener('click', function(e) {
    var dropdownMenu = this.nextElementSibling;
    dropdownMenu.classList.toggle('show');
    e.preventDefault();
  });
}

通过 JavaScript 代码，我们为一级菜单添加了一个 onclick 事件，点击一级菜单时会切换二级菜单的显示状态。

5. 示例说明

接下来我们给出两个示例来说明三级导航菜单的实现，代码片段如下：

<nav>
  <ul>
    <li><a href="#">一级菜单 1</a>
      <ul>
        <li><a href="#">二级菜单 1-1</a>
          <ul>
            <li><a href="#">三级菜单 1-1-1</a></li>
            <li><a href="#">三级菜单 1-1-2</a></li>
          </ul>
        </li>
        <li><a href="#">二级菜单 1-2</a>
          <ul>
            <li><a href="#">三级菜单 1-2-1</a></li>
            <li><a href="#">三级菜单 1-2-2</a></li>
          </ul>
        </li>
      </ul>
    </li>
    <li><a href="#">一级菜单 2</a>
      <ul>
        <li><a href="#">二级菜单 2-1</a>
          <ul>
            <li><a href="#">三级菜单 2-1-1</a></li>
            <li><a href="#">三级菜单 2-1-2</a></li>
          </ul>
        </li>
        <li><a href="#">二级菜单 2-2</a>
          <ul>
            <li><a href="#">三级菜单 2-2-1</a></li>
            <li><a href="#">三级菜单 2-2-2</a></li>
          </ul>
        </li>
      </ul>
    </li>
  </ul>
</nav>

上面的代码是最基本的三级导航菜单代码，包含了三个一级菜单，每个一级菜单包含两个二级菜单，每个二级菜单包含两个三级菜单。

第二个示例是带有logo的三级导航菜单。代码片段如下：

<nav>
  <div class="logo">
    <a href="#">My Logo</a>
  </div>
  <ul>
    <li><a href="#">一级菜单 1</a>
      <ul>
        <li><a href="#">二级菜单 1-1</a>
          <ul>
            <li><a href="#">三级菜单 1-1-1</a></li>
            <li><a href="#">三级菜单 1-1-2</a></li>
          </ul>
        </li>
        <li><a href="#">二级菜单 1-2</a>
          <ul>
            <li><a href="#">三级菜单 1-2-1</a></li>
            <li><a href="#">三级菜单 1-2-2</a></li>
          </ul>
        </li>
      </ul>
    </li>
    <li><a href="#">一级菜单 2</a>
      <ul>
        <li><a href="#">二级菜单 2-1</a>
          <ul>
            <li><a href="#">三级菜单 2-1-1</a></li>
            <li><a href="#">三级菜单 2-1-2</a></li>
          </ul>
        </li>
        <li><a href="#">二级菜单 2-2</a>
          <ul>
            <li><a href="#">三级菜单 2-2-1</a></li>
            <li><a href="#">三级菜单 2-2-2</a></li>
          </ul>
        </li>
      </ul>
    </li>
  </ul>
</nav>

上述示例中，我们在导航栏顶部添加了一个 logo 地址，并将它放置在导航栏的最左侧。

6. 总结

通过以上步骤，我们就可以轻松地实现一个漂亮的三级导航菜单，该菜单可以让用户轻松地找到所需要的内容。