如何处理响应式网站的多层级导航

前言

随着移动设备的普及，响应式网站越来越受到关注。在设计响应式网站时，多层级导航是一个常见的设计问题。如何在不同屏幕大小的设备上处理多层级导航，是一个需要考虑的问题。本文将介绍如何处理响应式网站的多层级导航，以及如何通过代码实现。

处理多层级导航的方法

1. 垂直导航

垂直导航是一种常见的处理多层级导航的方法。在大屏幕设备上，垂直导航可以展示多层级导航，而在小屏幕设备上，可以将多层级导航转换为垂直展示。这样可以保证用户在不同设备上都能够轻松地浏览导航。

下面是一个基于垂直导航的示例代码：

// www.javascriptcn.com code example
<nav class="navbar">
  <ul>
    <li>
      <a href="#">Home</a>
    </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="#">About</a>
    </li>
    <li>
      <a href="#">Contact</a>
    </li>
  </ul>
</nav>

在大屏幕设备上，可以使用 CSS 控制多层级导航的样式：

// www.javascriptcn.com code example
.navbar ul {
  display: flex;
  justify-content: space-between;
}

.navbar ul li {
  position: relative;
}

.navbar ul li ul {
  position: absolute;
  top: 100%;
  left: 0;
  width: 200px;
  background-color: #fff;
  border: 1px solid #ddd;
  z-index: 1;
  display: none;
}

.navbar ul li:hover ul {
  display: block;
}

在小屏幕设备上，可以使用媒体查询控制多层级导航的样式：

// www.javascriptcn.com code example
@media screen and (max-width: 768px) {
  .navbar ul {
    flex-direction: column;
  }

  .navbar ul li {
    position: relative;
  }

  .navbar ul li ul {
    position: static;
    width: 100%;
    display: none;
  }

  .navbar ul li:hover ul {
    display: block;
  }
}

2. 折叠式导航

折叠式导航是另一种常见的处理多层级导航的方法。在小屏幕设备上，折叠式导航可以将多层级导航转换为折叠式展示，以节省空间。在大屏幕设备上，可以将折叠式导航转换为水平展示。

下面是一个基于折叠式导航的示例代码：

// www.javascriptcn.com code example
<nav class="navbar">
  <button class="navbar-toggle" type="button">
    <span class="navbar-toggle-icon"></span>
  </button>
  <ul class="navbar-menu">
    <li>
      <a href="#">Home</a>
    </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="#">About</a>
    </li>
    <li>
      <a href="#">Contact</a>
    </li>
  </ul>
</nav>

在小屏幕设备上，可以使用 JavaScript 控制折叠式导航的样式：

// www.javascriptcn.com code example
.navbar-menu {
  display: none;
}

.navbar-menu.active {
  display: block;
}

.navbar-menu li ul {
  display: none;
}

.navbar-menu li.active ul {
  display: block;
}

// www.javascriptcn.com code example
const navbarToggle = document.querySelector('.navbar-toggle');
const navbarMenu = document.querySelector('.navbar-menu');

navbarToggle.addEventListener('click', () => {
  navbarMenu.classList.toggle('active');
});

const navbarMenuItems = document.querySelectorAll('.navbar-menu li');

navbarMenuItems.forEach((item) => {
  const subMenu = item.querySelector('ul');
  if (subMenu) {
    const subMenuToggle = document.createElement('button');
    subMenuToggle.classList.add('sub-menu-toggle');
    subMenuToggle.innerHTML = '<span class="sub-menu-toggle-icon"></span>';
    item.appendChild(subMenuToggle);

    subMenuToggle.addEventListener('click', () => {
      item.classList.toggle('active');
    });
  }
});

在大屏幕设备上，可以使用 CSS 控制折叠式导航的样式：

// www.javascriptcn.com code example
@media screen and (min-width: 768px) {
  .navbar-menu {
    display: flex;
    justify-content: space-between;
  }

  .navbar-menu li {
    position: relative;
  }

  .navbar-menu li ul {
    position: absolute;
    top: 100%;
    left: 0;
    width: 200px;
    background-color: #fff;
    border: 1px solid #ddd;
    z-index: 1;
    display: none;
  }

  .navbar-menu li:hover ul {
    display: block;
  }
}

结语

本文介绍了如何处理响应式网站的多层级导航，并提供了基于垂直导航和折叠式导航的示例代码。通过这些示例代码，读者可以更好地理解如何处理响应式网站的多层级导航，并在实际项目中应用。

Source: FunTeaLearn,Please indicate the source for reprints https://funteas.com/post/67d9064ca941bf71340712a4