响应式导航设计案例解析

响应式导航的设计遵循了响应式Web设计理念，页面的设计往往会根据用户行为以及设备环境（系统平台、屏幕尺寸、屏幕定向等）进行相应的调整。通过同比例缩减元素尺寸、调整页面结构布局以及内容的优化调整等方式，使用户在不同的平台上有着独一无二的用户体验。

本文收集了响应式设计网站中各种主流的导航设计趋势，如果你想设计出更好的导航设计或者了解新的响应式设计潮流，那么这篇文章不容错过！

调整尺寸&定位

这是响应式导航设计首个步骤，也被视为最简约的方法。目的在于设计一款永不被隐藏且能优雅的调整窗口大小。设计简短的导航链接，让页面看起来更加简洁、亮丽。

Fiafo就是一款典型的案例。导航链接设计居右侧，当浏览器窗口被压缩后，链接呈现在Logo下方，就如同一个单一的导航栏。当你调整浏览器尺寸后，该页面也会随之而更改，完全不受影响。

这种设计风格非常具有吸引力，因为它不需要隐藏任何链接，无需CSS3或JavaScript，页面上任何条目都能显示出。最大的缺点是，该导航限制了最多链接数量。

Paid to Exist采用了另一种设计趋势，其链接是浮动的。当浏览器的尺寸缩小到最小尺寸时，该链接不会扩大到像100%宽度那样。其采用了区块层级设计元素，导航横向排列不变，由一行变为两行，页面简洁清晰且用户体验一致。

菜单选择样式

菜单选择在响应式导航设计中，被设计师认为一种较为棘手的设计。一起来看下设计案例。

从Apache CouchDB的设计案例中可以看出，其设计布局呈现细长型且容易操控，因为它是一款单页面设计。

在移动设备上用户可能不会在意导航设计样式。导航菜单选择并不一定要采用漂亮的解决按干，只要它们能易于操作即可！

随着响应式设计的发展趋势，未来可能会有其他的解决方案来替代菜单选择。如果你需要一个快速的导航，且能够用支持所有的操作系统，那么HTML元素倒是个不错的选择。

覆盖下拉菜单

在响应式设计中，隐藏菜单是一个非常流行的设计趋势。这是因为它能为页面节省更多的空间。

在移动设备上，屏幕的运用是极其宝贵的，因此，你要尽可能地向用户提供更多的空间。采用下单隐藏菜单是个完美的选择，突出高优先级内容的处理方式。

Designmodo便采用了这种布局，通过设定图标点击对菜单进行收缩或展开，列表将显示新的下拉元素。

StickyGram采用了区块级别链接，不会因调整尺寸大小而有所更改，适用于任何设备，以最好的方式呈现在你的面前。

Tilde Inc采用了模块下拉菜单设计。

下拉菜单的共通点是：默认情况下菜单隐藏，一旦用户需要导航链接，点击图标菜单展开，选中后菜单自动消失隐藏，下一次操作时重复。优点是不会影响其他的页面内容。

多级导航

当你需要多个子链接的导航菜单，那么你不得不规划出一个完美的解决方案。 除了采用区块层级下拉菜单，你还可以选择创建多级导航菜单。

以SonySony公司的网站设计为例。用户通过滚动页面找到任何他们想要的内容。

页脚链接

一旦用户点击导航按钮，它会自动跳转到采用哈希元素ID的页脚。用户可以快速访问页脚链接，无需手动滚动。

再来看下Contents Magazine设计风格，只有几个少有的顶部导航链接。调整浏览器，你就会看到一个搜索栏，并且会呈现出一些模块链接。目的是在于保持页面布局均匀，而无需额外的脚本，比如jQuery。

隐藏滑动菜单

这种设计趋势在Apple Store里经常可看到，这也是备受iOS开发者欢迎的设计风格。

虽然在CSS3中可创建这种效果，但请记住，不是所有浏览器都能支持。jQuery倒是个更加稳定的选择，甚至还有一些免费的开源插件可供你选择。

点击查看Sequence的设计风格。

英文出自：Teamtreehouse