在现代网站和应用中，导航菜单是用户导向的主要元素之一。随着移动设备和桌面设备之间的界限越来越模糊，实现响应式设计的全局导航菜单变得越来越重要。在本文中，我们将讨论如何实现这样的导航菜单，以便您可以为您的网站或应用程序提供优秀的用户体验。
设计方案
在开始编码前，我们需要先定义设计方案。一个好的导航菜单应该是易于使用和具有高可访问性。同时我们不应该牺牲性能来换取美观度。在接下来的章节中，我们将深入探讨如何实现这个设计。
界面布局
首先，我们需要确定导航菜单的布局。在移动设备中，我们可以使用 Over the Top 导航布局，具体实现方式是将菜单变成一个“三明治”菜单图标，用户点击后会展示可用的选项。
在桌面设备中，我们可以使用水平布局的导航菜单。对于大型网站和应用，面包屑导航也是个很好的方案。使用面包屑导航可以有效的帮助用户更好地理解他们的位置。
可访问性
确保导航菜单具有高可访问性是非常重要的。我们需要考虑一些常见问题，例如HTML层次结构，颜色对比度等等。
HTML层次结构让你的网站更加结构化。确切地说，这意味着您应该使用正确的HTML元素来表示导航菜单中的项目。对于无障碍性，有助于理解页面结构，并为屏幕阅读器提供更多的上下文。
另一个值得一提的是，颜色对比度。确保菜单可以在不同的颜色深度下清晰可见。由于颜色对比度对一些人来说非常重要，必须确保它对用户无害。
实现方案
HTML 结构
让我们从HTML结构开始吧。
我们的导航菜单在HTML中是一个nav 标签。在导航菜单中，每个菜单项被一个a标签包裹。每个a标签都包含href属性定义链接，以及aria-current属性，表示当前活动的菜单项。
-- -------------------- ---- -------
---- ---------------
--- -------------------
--- -----------------
-- -------- ---------------- --------------------------
-----
--- -----------------
-- ------------- ------------------------
-----
--- -----------------
-- ------------- ------------------------
-----
-----
------CSS 样式
我们使用CSS的flex属性来实现响应式设计。
首先，我们使用flex显示导航栏项目列表而不是浮动。这将允许我们在桌面设备使用水平导航，而在移动设备中使用垂直导航。
-- -------------------- ---- ------- ----------- - -------- ----- ---------- ----- ---------------- -------------- ------------ ------- ------------- -- ----------- -- -------------- -- ----------- ----- -
在移动设备中，我们使用媒体查询来将其转换为垂直布局(widget)，并使用三明治图标(widget__hamburger)。
-- -------------------- ---- -------
------ ----------- ------ -
----------- -
--------------- -------
--------- ---------
---- -----
----- --
-------- --
-------- -----
-
---------------- -
-------- -----
-
--------------- -
-------- ------
-------- --
---------- -------
------------ --
----------------- ------------
------- --
------- --------
----------- -----
-
--------------------- -
-------- --
-
------------------ -
-------- -------------
------ -----
------- -----
--------- ---------
-
---------------------- -
------ -----
------- -----
--------- ---------
---- --
----- --
-------- -----
------------ -------
---------------- -------
-
------------------------ -
------ -----
------- ----
----------------- -----
--------- ---------
---- ----
----- --
---------- -----------------
----------- ---------------- ---- -----
-
------------------------ ------------------------ -
----------------- -----
-
-在大屏幕上，我们使用水平布局而不是垂直布局：
-- -------------------- ---- -------
------ ----------- ------ -
----------- -
--------------- ----
-
--------- -
------- --
-
-JavaScript
最后，我们使用JavaScript来切换三明治菜单的显示/隐藏（尽管通常您可能想使用CSS动画，而不是JavaScript，来实现这个效果）。
-- -------------------- ---- -------
----- ------------- - ---------------------------------------------
----- ---------- - ------------------------------------------
----- ---------------- - -- -- -
------------------------------------
--
--------------------------------------- ------------------
----------------------------------------- ------- -- -
-- ----------- --- ------- -- ---------- --- -------- -
-----------------------
-------------------
-
---
------------------------------------ ------- -- -
-- ----------- --- -------- -- -------------------------------------- -
-------------------
-
---结论
在本文中，我们讨论了如何实现响应式设计的全局导航菜单，并给出了示例代码。实现高可用性并考虑到所有用户和设备的需求是实现优秀用户体验的关键。现在，您已经掌握了实现炫酷导航菜单的技巧，可以上手进行实践了！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67529e728bd460d3ad9689b4