随着移动设备的普及，越来越多的网站采用了响应式设计。在响应式设计中，导航栏是一个十分重要的组件。然而，导航栏在不同设备上的表现却存在着一些问题。
问题
1. 折叠式菜单在移动设备上不够友好
在移动设备上，通常会使用折叠式菜单来统一其他设备上的导航栏。然而，经常被用户抱怨的是使用折叠式菜单时，用户需要多次点击才能到达目的地，这对用户来说并不友好。
2. 导航栏不够直观
在不同设备上，导航栏的布局往往存在差异，在一些小屏幕上的设备上，可能需要通过滚动来查看更深层的导航项。这使得导航栏不够直观，用户不清楚每个导航项的层级关系。
3. 导航栏样式不够一致
在不同设备上，导航栏的样式往往也存在差异。在某些情况下，导航栏的颜色和图标也会发生变化，这使得用户难以在不同设备上辨别导航栏的功能。
解决方式
1. 使用隐藏式菜单
隐藏式菜单可以在移动设备上解决折叠式菜单需要多次点击才能到达目的地的问题。隐藏式菜单在移动设备上一般采用菜单图标来呈现，单击菜单图标后会弹出一个菜单列表。
示例代码：
-- -------------------- ---- ------- ---- ------------- ---- -------------- ---------- ------------------ --- ------------------- ------ ---------------------- ------ -------------------------- ------ -------------- ----------- ------ ------------------------- ----- ------展开代码
-- -------------------- ---- ------- ----- - --------- --------- - ---------- - -------- ------ ------ ----- ------- ----- - ----------- - -------- ----- --------- --------- ---- ----- ----- -- ------ ----- ----------------- ----- -------- ----- ----------- - --- --- ------- -- -- ----- - ----------- -- - -- - ----------- ----- - ----------- -- - - -------- ------ -------- ---- -展开代码
2. 使用层级结构
使用层级结构可以使得导航栏更加直观。在小屏幕上的设备中，可以使用折叠式菜单来隐藏深层次的导航项，这样可以保持整个导航栏的逻辑层级关系。
示例代码：
-- -------------------- ---- ------- ---- --------------- --- --------------------- ------ ---------------------- --- ----------------- -- --------------------- --- ---------------------- ------ ---------------- ---------- ------ ---------------- ---------- ------ ---------------- ---------- ----- ----- ------ -------------- ----------- ------ ------------------------- ----- ------展开代码
-- -------------------- ---- ------- ------- - -------- ----- ---------------- -------------- ------------ ------- - ------------- - -------- ----- ----------- ----- ------- -- -------- -- - ------------- -- - ------------- ----- - ------------- ------------- - ------------- -- - -------------- - -------- ----- --------- --------- ---- ----- ----- -- ----------------- ----- -------- ----- ----------- - --- --- ------- -- -- ----- - --------------- -------------- - -------- ------ -展开代码
3. 统一导航栏样式
统一导航栏样式可以使得用户可以轻松辨别导航栏功能。在设计导航栏样式时，可以借鉴一些优秀的设计，或者根据品牌风格来进行设计。
示例代码：
-- -------------------- ---- ------- ---- --------------- --- --------------------- ------ ---------------------- --- ----------------- -- --------------------- --- ---------------------- ------ ---------------- ---------- ------ ---------------- ---------- ------ ---------------- ---------- ----- ----- ------ -------------- ----------- ------ ------------------------- ----- ------展开代码
-- -------------------- ---- ------- ------- - -------- ----- ---------------- -------------- ------------ ------- ----------------- ----- -------------- --- ----- ----- -------- ----- - ------------- - -------- ----- ----------- ----- ------- -- -------- -- - ------------- -- - ------------- ----- - ------------- ------------- - ------------- -- - -------------- - -------- ----- --------- --------- ---- ----- ----- -- ----------------- ----- -------- ----- ----------- - --- --- ------- -- -- ----- - --------------- -------------- - -------- ------ -展开代码
结论
在响应式设计下，导航栏是一个十分重要的组件。在设计导航栏时，我们应该考虑到用户在不同设备上的体验，并采取相应的措施来解决问题。我们可以使用隐藏式菜单来解决移动设备上的折叠式菜单不够友好的问题；使用层级结构来使得导航栏更加直观；并使用统一的导航栏样式来让用户可以轻松辨别导航栏功能。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6771dbb96d66e0f9aad27140
