Question

在小视口屏幕中，响应式设计普遍存在一个问题，即页面上一大堆导航链接会占据宝贵的屏幕空间。

例如，And the winner isn't…网站只有6个导航链接，目前页面在小视口中的效果如下所示：

我想在浏览器视口小于一定宽度时，将这些导航链接转换为一个下拉菜单。你可以自己编写一段代码来做这件事。可敬的Chris Coyier写过一篇文章来讲怎么做（http://css-tricks.com/convert-menu-to-dropdown/）。不过，你还可以选择别人已经写好的脚本。为了简便起见，我就选了个现成的脚本。下图显示了在小视口中将导航链接转换为下拉菜单后的效果：

点击“Select a page”按钮就会显示出导航，效果如下：

这就是渐进增强的典型代表——它不是一个必需的功能，但为使用小屏幕设备的用户提供了更多的第一屏内容。那我们来继续看看如何实现它。首先下载Responsive Menu脚本（https://github.com/mattkersley/Responsive-Menu），和以前一样将其（jquery.mobilemenu.js）存放在js文件夹。接下来再给每个页面的导航链接部分设置一个id：

不做上面这一步也行，但jQuery选择器搭配特定id速度比较快。接下来，在conditional.js文件中追加如下代码：

在为老版本IE按需加载Respond.js之后，我们增加了另一个检测：

这个检测是问浏览器视口是否能识别媒体查询，如果可以，那视口的最大宽度是否是600像素？如果是，则：

上面这行代码同时加载了jQuery库文件和Responsive Menu文件，

complete这块代码意思是，一旦文件下载并执行之后，运行如下代码：

这里有几个针对Responsive Menu的配置参数。最重要的第一个参数，定义了在视口多宽的情况下，将导航链接转换为下拉菜单（此处我设置为600px）。

此处我们使用Modernizr又一次保证了不需要该效果的用户不会加载多余代码，而需要的用户则会享受到这种渐进增强体验。

对于网页设计师，尤其是那些不熟悉JavaScript代码的人来说，一看到Modernizr就会心生畏惧。Modernizr当然值得深入挖掘，但这个简单的教程已经足够说明Modernizr的用处了，它在你将来的响应式项目中一定会大显身手。