响应式页面导航四大设计

1. 简单智能的导航菜单形式

这款菜单可以适用于所有屏幕的一些设计，菜单扁平化，留有足够空间在各个不同的屏幕上做响应式的变化，一种简单的设计便可以轻松调整。

先来看下面这款非常简单色块的导航，采用了由网页文字链变到移动设备的按钮形式，规避了移动设备操作不精准等一些弊端。

另一种常见的右侧导航设计在很多网站中都有应用，在移动设备上，导航横向排列不变，Logo和导航由一行变为两行，页面简洁清晰且用户体验一致。

2. 导航菜单列表形式

最常用的一种排列形式，横向导航在小屏幕下变为纵向排列，一列、两列甚至是多列多行的形式，具体应实际情况而定。

3. 导航隐藏形式

在手机设备上导航的另一种形式以隐藏列表的方式呈现，是对空间的有效利用，突出高优先级内容的处理方式。

来看下Microsoft的下拉隐藏菜单，通过设定图标点击对菜单做收缩或展开。经典、简约的布局完美适合平台转换。

4 .下拉菜单形式

使用下拉菜单来组织复杂内容是一个非常方便和流行的方式,复 杂的网站甚至会使用多层次的下拉菜单。在较小的屏幕上，在依赖触摸反应的设备上，下拉菜单要慎用。这里没有悬浮效果，屏幕资源可能非常有限。默认情况下， 导航菜单根本就不显示，只有当触摸到右上角指定的小图标时，第一个内容层才会打开。当触摸到其中一个栏目时，第二个内容层才会逐渐展开，给用户一个非常清 晰明了的内容导航。