导航是Web网站重要的元素:置顶菜单的设计研究(2)
Ryan Scherf该网站的导航是垂直的，上面只有图标。该创新令人印象深刻。
图7
Web Designer Wall该网站的垂直置顶导航效果很好，因为菜单只在4个菜单项。它很适用于博客。
图8
虽然置顶菜单并不是最流行的导航形式，但越来越多的网站正在使用。
现在就开始设计
避免使用iFrame
iFrame似乎是实现置顶导航的直接方法，但要避免使用它。因为iFrame会导致很多问题，尤其是跨浏览器兼容性问题、安全问题、搜索引擎优化问题。iFrame有它的用武之地，但不应成为HTML布局中的主要部分。
CSS
用CSS来实现置顶导航是一个不错的方法。它也是最直接、最轻量、最快速的方法。有三点需要注意： position、margin-top和z-index。将菜单的position设置为“fixed”，菜单将无法跟随页面的其他部分滚动。如果导航是水平方向的，可以不用设置margin属性。最后，在水平导航上，利用z-index属性保证导航始终居于其他元素的上面。当你滚动页面时，其他内容将在导航下滑动。
想了解更多内容请见W3C网站。
JQuery和JavaScript
图9：这个简单且精巧的置顶导航条由JavaScrpt实现
如果你更喜欢jQuery、JavaScript，你可以试试下面的方法：
● jScroll
● Simple Smart Sticky Navigation Bar
置顶导航的缺点
图10
设计局限性
采用置顶导航可能需要放弃一些设计选择，而这些可能是团队不愿放弃的。例如，水平置顶导航位于页面的顶部，其他元素的上面。虽然它很容易实现，但不一定是用户所需要的。
容易分心，受到打扰
一不小心，垂直导航就会让用户分心。在用户滚动页面时，一些置顶元素可能会出现延迟；其他元素可能太高（或太宽），而影响对内容的访问。导航应该容易访问，同时不应抢夺内容的注意力。
对移动设备的兼容性
上文提到的CSS和JavaScript实现方法，在某些移动设备浏览器上并不提供支持。Luke Wroblewski的文章《Organizing Mobile》分享了在移动设备上创建导航需要重点注意的多项原则。响应式设计技术也为基于屏幕尺寸调整导航提供了一些解决方案。
要了解各个设备对它的支持情况。提前了解这些兼容性问题，可以节约更多时间。《When Can I Use?》文章中介绍了桌面和移动浏览器对CSS属性“position:fixed”的支持情况。Brad Frost也对此做了测试和分析，在他的视频中也提供了精彩的观点。
结论
作为设计者、开发者，我们为什么要不断迫使用户上下滚动页面来寻找导航呢？这在桌面软件上已不是问题，并且我们有一些数据可以显示置顶菜单的益处。在美国，访问量最高的25家网站中有84%可以通过置顶导航，来加速对用户的导航。
当然，置顶导航并不适用于任何情况，尤其在资源紧俏时。使用置顶导航需认真考虑，并保证网站的可用性和整体用户体验。
作者简介：
Hyrum Denney，专注于Web设计和开发。现就职于SirsiDynix，担任UX/UI设计师。曾创办自己的UX工作室，同时在电子商务行业担任网络运营主管。热衷于学习新知识，对用户体验设计、用户使用网站的心理学有着特殊的兴趣爱好。
原文链接：Sticky Menus Are Quicker To Navigate
编译链接：CSDN