摘要：本文把目光聚集在更具挑战性的响应式Web设计：响应式导航菜单设计，这里提供了五大法则，让你无论在大屏幕还是小屏幕上都能轻松高效地设计响应式导航菜单。
响应式Web设计(Responsive Web design)的理念是，页面的设计与开发应当根据用户行为以及设备环境(系统平台、屏幕尺寸、屏幕定向等)进行相应的响应和调整。响应式设计允许你在不同的平台上，创建独一无二的用户体验，与此同时，只要最少的维护工作。
已经有不少文章涉及响应式设计，这些文章帮助我们理解和解剖响应式网站设计的学习指南和教程，揭示媒体查询的作用，与此同时，还提供一些令人兴奋的响应式设计集合。
我们暂且先放开宏观上的响应式Web设计，把目光聚集在更具挑战性的“响应式导航菜单设计”上。桌面版提供了足够的屏幕空间来显示多层导航布局，然而，屏幕越小，清晰地显示同一个内容就越困难。这里提供了五大法则，让你无论在大屏幕还是小屏幕上都能轻松高效地设计响应式导航菜单。
一.按照优先级显示内容
也许，这是在屏幕小的设备上的最有效方法，根据用户来突显不同的内容。在什么样的情况下，用户会使用移动设备来访问网站?他们的访问目标是什么?我们需要提供什么样的内容来满足?下面我们例举两个例子， 根据内容优先级，在移动设备上简化网站导航。
1.只显示高优先级内容
在屏幕较小的移动设备上应该优先考虑内容并且去移掉那些小的栏目。
The Sweet Hat Club网站会为移动设备优化内容并且重构导航菜单，来代替水平显示所有栏目(item)，移动版本的导航仅仅垂直显示几个高优先级的栏目，尽管Twitter和Facebook连接被移掉，但Join连接却被升级。它并不是一个普通的文本连接，而是一个引起人们注意的彩色按钮。
2.在顶部显示高优先级内容
使用视觉效果来让用户找到他们的访问方式。
Mobile Web Best Practices的桌面版也显示了一个非常清晰明了的导航菜单。每个分类除了有相应的名称外，还会配上特定的图标。此外，在文本下面会有更清晰的分类图标。在移动设备上，顶部的文字菜单会消失，用户通过使用大的图标来对网站进行导航。该网站使用了两种不同风格的导航，尽管如此，分类清晰、风格与图标相一致，给用户带来了一定的视觉效果。
