必要时将导航链接转换为下拉菜单

发布日期:2015-09-19 23:15:13
在小视口屏幕中,响应式设计普遍存在一个问题,即页面上一大堆导航链接会占据宝贵
的屏幕空间。

例如,And the winner isn't…网站只有 6个导航链接,目前页面在小视口中的效果如下所示:我想在浏览器视口小于一定宽度时,将这些导航链接转换为一个下拉菜单。你可以自己编 写 一 段 代 码 来 做 这 件 事 。 可 敬 的 Chris Coyier 写 过 一 篇 文 章 来 讲 怎 么 做。 不过, 你还可以选择别人已经写好的脚本。为了简便起见,我就选了个现成的脚本。下图显示了在小视口中将导航链接转换为下拉菜单后的效果:


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

  Copyright © 2010-2018 北京梦创义科技
公司地址:朝阳区紫芳路9号院广顺园2号楼2605A

联系我们| 关于我们| 网站地图| 北京网站建设| 北京网页设计