响应式导航条(css响应式导航)

本文主要介绍响应式导航栏(css响应式)，下面跟着东辰网详细了解一下吧。

在大屏幕上，顶部导航或左侧导航是两种典型的设计模式。然而，这两种模式在小屏幕上遇到挑战。在响应式设计日益流行的今天，我们更有必要重新审视小屏幕环境下的导航设计模式。这些通过移动设备访问的页面导航必须方便用户快速访问，但又不能过于突出。

下面，我列出了响应导航的七种常见设计模式，它们是:

top(or自由放任主)页脚锚菜单选择切换滑动侧底部完全隐藏以上每种设计模式都有自己的优缺点。在选择通航设计方案时，需要根据项目的实际情况进行判断。

浇头(或自由放任主)置顶导航或者让导航随布局自由流动(自由放)是最简单的导航实现。正是因为这种易于实现的，才成为了标准普尔许多有反应的网页。

优势

易于实现:大屏和小屏上的实现一致，不依赖JavaScript。这在最大程度上保证了兼容性，不会破坏原有的CSS样式，也不会打乱原有的内容顺序。这种确保它是完全流体布局，没有任何人为干预。

空间占用:身高问题是移动端的核心问题。卢克标准普尔内容开始，导航第二他在书中表达了一种典型的移动网络体验。我们都期望用户尽快获取内容，这意味着我们需要去掉导航，以确保用户始终专注于核心信息。然而，当导航高度过高时，屏幕中的核心信息无法显示，这将导致用户疑惑。如下图，当我们打开一个页面，整个屏幕都被导航占据，用户可以得不到有效的信息。！【顶部导航自动显示在小屏幕上】【2】扩展性差:当你的导航刚显示在一行时，你想添加章节会怎样？如果客户突然要求添加另一个名为产品和服务？还是导航标题翻译成其他语言会导致字符长度的变化？这些情况会破坏原来的设计方案。粗手指:导航都挤在一起，粗手指着急，所以可以t点击他们想访问的导航链，增加了误操作的几率(不适合在小屏幕上用手指点)。跨设备问题:不同的设备呈现不同，在iPhone上很棒的页面在其他平台上可能表现很差。！【在不同设备上呈现的差异】【3】页脚锚只在页面头部保留一个去掉底部的锚，所以把导航放在页脚是一个比较棘手的做法。节省了头部宝贵的空间，同时满足了出入导航的需求。

优点:易于实现:头锚，导航底，没有比这更简单的了！–不依赖JavaScript：这意味着更少的测试和更好的浏览器支持CSS改动小：由于采用了绝对或固定位置，将底部导航移到大屏幕的顶部简直太容易了

缺点：用户迷惑：快速跳转至页脚这一动作容易让用户迷惑缺乏优雅：这样说很奇怪（译者也有)，但我（作)认为类似开关的交互更一些。这种采用锚点跳转的虽然实用，但不优雅，相比那些经过精心设计的移动端应用的交互而言太过粗糙。

菜单选择将导航收纳在一个选择菜单的控件当中是一个不错的。它避免了导航置顶所占用的屏幕空间。

优点：

腾出了足够的空间：一个选择菜单无论是在横向或纵向上都特别省空间符合用户习惯：相比置底的，用户更习惯导航被放置在页面头部容易辨认：下拉菜单的控件样式十分显眼，及其容易发现支持本地化的交互由于采用标准控件，使得操作十分本地化，这种本地化是指对设备自身属性的支持，比如，在触摸设备上能够通过点击操作，而在轨迹球上支持滚动操作；

缺点：

样式不统一：不同浏览器会呈现不同样式的下拉菜单可能会让用户困惑：大部分用户只在填写表单时才会看见下拉菜单，而将下拉菜单用作导航，担心用户一下子无法理解下拉菜单内容的处理比较奇怪：因为在下拉菜单中，子项目会自动缩进，这样虽然可用，但从视觉上看十分混乱；可能会依赖浏览器调用JavaScript

开关开关的实现类似页脚锚点，但不是点击跳转至页脚，而是点击后将菜单区域滑动展开。同样也是比较容易实现的设计模式。

优点：

易于理解：相较于页脚锚点突然间的跳转，开关这种是位置不变的交互更容易让用户接受交互更优雅（相比跳转而)拓展性强：你唯一要做的就是在PC端隐藏开关，在适当的断点处显示它，这一切的一切都能通过CSS来实现。

缺点：

动画可能不够平滑：Android对于动画的支持一直不好，因此，可能得到你想要的效果非常依赖JavaScript：正因为打开开关的动画需要JavaScript来实现，所以它的兼容性不太好（作者的黑莓设备就不支)；

侧滑导航侧滑是在Facebook的大力推广下流行起来的。之所以叫抽屉源于它的交互动效，当点击菜单按钮后，导航模块会像抽屉一样从页面边缘滑动出现。

优点：

空间充裕：因为从边缘滑出，这些内容被理解为在底层或屏幕外的无限区域内好看：简洁就是美，而且动画效果惊艳。缺点:

小众:相对于其他简单的设计模式，从侧面滑动导航条的效果需要一些复杂的动画来实现，从而把一些低端设备挡在门口。因此，如果你的项目是为大众设计的，你需要谨慎。适应性差:这种模式只适合移动设备，在大屏幕上表现不好(也没必)。可能会有困惑:当我开始次看到脸书采用这种设计，我认为网页是错误的！在屏幕右侧透露一些信息对我来说还是很奇怪的(纯属作者■个人观)

仅在页脚中放置导航仅在页脚中放置导航类似于页脚定位点，只是它不在页眉中放置定位点。这种模式的理念是内容开始，导航第二。这种方法要求用户将页面滑动到底部来查看导航。

优点:容易实现兼容(无JavaScrip)CSS改动小:由于位置绝对或固定，很容易将底部导航移到大屏顶部。

缺点:不好找:无论大屏还是小屏都很难在页脚找到导航；难用:移动用户需要连续滚动页面到底部才能使用页脚导航，非常不方便。

相关案例:梨子磨损

完全隐藏

隐藏导航，获得最大空间。

这种设计模式遵循以下规则:don不要惩罚通过移动终端访问你的网站的用户。移动用户想要或不需要什么信息仍然是个谜。;我不想要。桌面用户能做的事情，移动用户都会做，所以有必要只为移动用户提供一些核心功能。

优点:(原创如地狱求大神翻译的忠实和优)

对有限屏幕空间的完美利用对于移动设备来说有很大的优势，向下滑动就可以更简单的查看。

缺点:去掉移动用户的核心功能或内容，隐藏链接或内容，这样不好。R:无命令向页面添加额外开销只能隐藏页面上的元素。页面的代码、图片或其他文件仍然在后台下载，最终导致页面访问缓慢。

两个完全分离的导航系统很难维护，会成为后期维护的负担。

可能会有困惑。当用户向下滑动页面来刷新列表时，他们不会。;我没有意识到，当我开始次看到脸书采用这种设计时，我认为页面是错误的！在屏幕右侧透露一些信息对我来说还是很奇怪的(纯属作者■个人观)

结语手机导航就像你真正的朋友:彼此需要，却又给彼此空间；而那些假装和你很亲近的朋友，总是在你需要的时候消失。迷失(当你需要导航时，你可以t找不)或者占用你的个人空间让你抓狂(比如擦，滚出我的)；因此，响应式导航的设计需要平衡便携性和访问空间。

在大屏幕上，顶部导航或左侧导航是两种典型的设计模式。然而，这两种模式在小屏幕上遇到挑战。在响应式设计日益流行的今天，我们更有必要重新审视小屏幕环境下的导航设计模式。这些通过移动设备访问的页面导航必须方便用户快速访问，但又不能过于突出。

下面，我列出了响应导航的七种常见设计模式，它们是:

top(or自由放任主)页脚锚菜单选择切换滑动侧底部完全隐藏以上每种设计模式都有自己的优缺点。在选择通航设计方案时，需要根据项目的实际情况进行判断。

浇头(或自由放任主)置顶导航或者让导航随布局自由流动(自由放)是最简单的导航实现。正是因为这种易于实现的，才成为了标准普尔许多有反应的网页。

优势

易于实现:大屏和小屏上的实现一致，不依赖JavaScript。这在最大程度上保证了兼容性，不会破坏原有的CSS样式，也不会打乱原有的内容顺序。这种确保它是完全流体布局，没有任何人为干预。

空间占用:身高问题是移动端的核心问题。卢克标准普尔内容开始，导航第二他在书中表达了一种典型的移动网络体验。我们都期望用户尽快获取内容，这意味着我们需要去掉导航，以确保用户始终专注于核心信息。然而，当导航高度过高时，屏幕中的核心信息无法显示，这将导致用户疑惑。如下图，当我们打开一个页面，整个屏幕都被导航占据，用户可以得不到有效的信息。！【顶部导航自动显示在小屏幕上】【2】扩展性差:当你的导航刚显示在一行时，你想添加章节会怎样？如果客户突然要求添加另一个名为产品和服务？还是导航标题翻译成其他语言会导致字符长度的变化？这些情况会破坏原来的设计方案。粗手指:导航都挤在一起，粗手指着急，所以可以t点击他们想访问的导航链，增加了误操作的几率(不适合在小屏幕上用手指点)。跨设备问题:不同的设备呈现不同，在iPhone上很棒的页面在其他平台上可能表现很差。！【在不同设备上呈现的差异】【3】页脚锚只在页面头部保留一个去掉底部的锚，所以把导航放在页脚是一个比较棘手的做法。它节省了宝贵的头部空间，就像时又满足了访问导航的需求。

优点：容易实现：页眉锚点，导航置底，没有比这更简单的了！–不依赖JavaScript：这意味着更少的测试和更好的浏览器支持CSS改动小：由于采用了绝对或固定位置，将底部导航移到大屏幕的顶部简直太容易了

缺点：用户迷惑：快速跳转至页脚这一动作容易让用户迷惑缺乏优雅：这样说很奇怪（译者也有)，但我（作)认为类似开关的交互更一些。这种采用锚点跳转的虽然实用，但不优雅，相比那些经过精心设计的移动端应用的交互而言太过粗糙。

菜单选择将导航收纳在一个选择菜单的控件当中是一个不错的。它避免了导航置顶所占用的屏幕空间。

优点：

腾出了足够的空间：一个选择菜单无论是在横向或纵向上都特别省空间符合用户习惯：相比置底的，用户更习惯导航被放置在页面头部容易辨认：下拉菜单的控件样式十分显眼，及其容易发现支持本地化的交互由于采用标准控件，使得操作十分本地化，这种本地化是指对设备自身属性的支持，比如，在触摸设备上能够通过点击操作，而在轨迹球上支持滚动操作；

缺点：

样式不统一：不同浏览器会呈现不同样式的下拉菜单可能会让用户困惑：大部分用户只在填写表单时才会看见下拉菜单，而将下拉菜单用作导航，担心用户一下子无法理解下拉菜单内容的处理比较奇怪：因为在下拉菜单中，子项目会自动缩进，这样虽然可用，但从视觉上看十分混乱；可能会依赖浏览器调用JavaScript

开关开关的实现类似页脚锚点，但不是点击跳转至页脚，而是点击后将菜单区域滑动展开。同样也是比较容易实现的设计模式。

优点：

易于理解：相较于页脚锚点突然间的跳转，开关这种是位置不变的交互更容易让用户接受交互更优雅（相比跳转而)拓展性强：你唯一要做的就是在PC端隐藏开关，在适当的断点处显示它，这一切的一切都能通过CSS来实现。

缺点：

动画可能不够平滑：Android对于动画的支持一直不好，因此，可能得到你想要的效果非常依赖JavaScript：正因为打开开关的动画需要JavaScript来实现，所以它的兼容性不太好（作者的黑莓设备就不支)；

侧滑导航侧滑是在Facebook的大力推广下流行起来的。之所以叫抽屉源于它的交互动效，当点击菜单按钮后，导航模块会像抽屉一样从页面边缘滑动出现。

优点：

空间充于:因为滑出了边缘，这些内容在屏幕外的底部或者无限区域被理解为美:简洁就是美，动画效果很惊艳。

缺点:

小众:相对于其他简单的设计模式，从侧面滑动导航条的效果需要一些复杂的动画来实现，从而把一些低端设备挡在门口。因此，如果你的项目是为大众设计的，你需要谨慎。适应性差:这种模式只适合移动设备，在大屏幕上表现不好(也没必)。可能会有困惑:当我开始次看到脸书采用这种设计，我认为网页是错误的！在屏幕右侧透露一些信息对我来说还是很奇怪的(纯属作者■个人观)

仅在页脚中放置导航仅在页脚中放置导航类似于页脚定位点，只是它不在页眉中放置定位点。这种模式的理念是内容开始，导航第二。这种方法要求用户将页面滑动到底部来查看导航。

优点:容易实现兼容(无JavaScrip)CSS改动小:由于位置绝对或固定，很容易将底部导航移到大屏顶部。

缺点:不好找:无论大屏还是小屏都很难在页脚找到导航；难用:移动用户需要连续滚动页面到底部才能使用页脚导航，非常不方便。

相关案例:梨子磨损

完全隐藏

隐藏导航，获得最大空间。

这种设计模式遵循以下规则:don不要惩罚通过移动终端访问你的网站的用户。移动用户想要或不需要什么信息仍然是个谜。;我不想要。桌面用户能做的事情，移动用户都会做，所以有必要只为移动用户提供一些核心功能。

优点:(原创如地狱求大神翻译的忠实和优)

对有限屏幕空间的完美利用对于移动设备来说有很大的优势，向下滑动就可以更简单的查看。

缺点:去掉移动用户的核心功能或内容，隐藏链接或内容，这样不好。R:无命令向页面添加额外开销只能隐藏页面上的元素。页面的代码、图片或其他文件仍然在后台下载，最终导致页面访问缓慢。

两个完全分离的导航系统很难维护，会成为后期维护的负担。

可能会有困惑。当用户向下滑动页面来刷新列表时，他们不会。;我没有意识到，当我开始次看到脸书采用这种设计时，我认为页面是错误的！在屏幕右侧透露一些信息对我来说还是很奇怪的(纯属作者■个人观)

结论转移导航就像你真正的朋友:你需要对方，但你给对方空间；而那些假装和你很亲近的朋友，总是在你需要的时候消失(你可以需要导航的时候就找不)或者占用你的个人空间让你抓狂(比如擦，滚出我的)；因此，响应式导航的设计需要平衡便携性和访问空间。

了解更多响应式导航栏(css响应式导)相关内容请关注东辰网。