在响应式设计中，导航条往往会出现层级过深的问题，因为在不同的屏幕尺寸下，导航菜单的显示方式会发生变化，导致层级变多，这让用户难以找到他们想要访问的页面。在这篇文章中，我们将介绍几种方法来解决这个问题。
1. 使用单列导航菜单
单列导航菜单是一种简单的解决方案。它只需要一列链接，这些链接会在不同的屏幕尺寸下重新排列。这样做可以减少导航的层级，提高用户体验。
例如：
-- -------------------- ---- -------
-----
----
------ ----------------------
------ -------------- -----------
------ --------------------------
------ ----------------------
------ ---------------- -----------
-----
------在移动设备上，这段代码会呈现为一个单列的列表，如下所示：
- Home
- About Us
- Services
- Blog
- Contact Us
2. 折叠式导航菜单
如果你有很多的链接，在单列导航菜单中排布可能不是最佳选择。在这种情况下，你可以考虑使用折叠式导航菜单。
折叠式导航菜单会将所有的链接隐藏在一个按钮下面，当按钮被点击时，会展开一个包含所有链接的菜单。这种解决方案可以在有限的空间内展示很多链接，而不必让导航菜单变得过于深层。
例如：
-- -------------------- ---- -------
-----
------- ---------------------------------
--- -------------
------ ----------------------
------ -------------- -----------
------ --------------------------
------ ----------------------
------ ---------------- -----------
-----
------上面的代码将在桌面设备上显示为常规导航菜单，在移动设备上显示为一个按钮。当用户点击这个按钮时，菜单就会展开。
3. 使用标签页式导航菜单
标签页式导航菜单是一种水平导航菜单，它使用标签页来组织内容。这种导航菜单可以在不同的屏幕尺寸下自适应，并且可以减少导航的层数。
例如：
-- -------------------- ---- -------
-----
----
------ --------------------------
------ ------------------- -----------
------ ----------------------------------
------ --------------------------
------ ----------------------- -----------
-----
------这段代码会在桌面设备上呈现为标签页，而在移动设备上则以单列形式呈现。
4. 使用下拉式导航菜单
下拉式导航菜单可以在不同屏幕尺寸下自适应。在桌面设备上，鼠标悬停在菜单上时会自动展开子菜单。在移动设备上，则需要点击菜单按钮来展开下拉式菜单。
例如：
-- -------------------- ---- -------
-----
----
------ ----------------------
----
-- -------------- ------
--- -----------------
------ -------------------------
------ ----------------------
------ -------------------------
-----
-----
----
-- ---------------------
--- -----------------
------ ------------ ---------------
------ ---------------- ---------------
------ ---------------------
-----
-----
------ ----------------------
------ ---------------- -----------
-----
------这段代码将在桌面设备上呈现为一个下拉式菜单，而在移动设备上则呈现为折叠式导航菜单。
结论
在响应式设计中，为了避免导航层级过深，你可以通过使用单列导航菜单、折叠式导航菜单、标签页式导航菜单、下拉式导航菜单等解决方案。我们建议在实际应用中，根据网站的整体设计和需要选择适合的导航方式。
示例代码：https://codepen.io/yjw134/pen/qBRozWJ
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6752f7388bd460d3ad9a1315