7种响应式导航解决方案

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

下列介绍7种解决方案：

1. 调整尺寸&定位

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

   如http://www.fiafo.com/之前的网页，不过这个网站现在风格变了

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

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

3. 菜单选择样式

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

   从Apache CouchDB的设计案例中可以看出，其设计布局呈现细长型且容易操控，因为它是一款单页面设计。在移动设备上用户可能不会在意导航设计样式。导航菜单选择并不一定要采用漂亮的解决按干，只要它们能易于操作即可！随着响应式设计的发展趋势，未来可能会有其他的解决方案来替代菜单选择。如果你需要一个快速的导航，且能够用支持所有的操作系统，那么HTML元素倒是个不错的选择。 http://couchdb.apache.org/#about

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

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

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

   http://designmodo.com/

   像这样子的网站还有如：http://www.tilde.io/

5. 多级导航

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

6. 页脚链接

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

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

   http://contentsmagazine.com/articles/

7. 隐藏滑动菜单

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

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

   点击查看Sequence的设计风格。

   http://www.sequence.co.uk/

切图网（qietu.com）是首家专门从事web前端开发的公司，专注we前端开发，响应式布局，webapp手机端网页制作，微信html5页面制作，bootstrap布局等，关注用户体验。