响应式WEB设计:将导航菜单转换成下拉菜单以适应小屏幕设备

原创文章 作者:月光光 2012年06月01日 13:45helloweba.com 标签:HTML5  CSS3  jQuery 

移动互联网时代的到来,使得我们在进行页面设计与开发时,应当根据用户行为以及设备环境(系统平台、屏幕尺寸)进行相应的响应和调整,这个理念也叫响应式WEB设计。今天我将给大家讲解当屏幕尺寸变小时,将横向菜单转换成下拉菜单的效果。

本文使用了HTML5标签以及CSS3技术,您在查看demo时需要您的浏览器支持HTML5和CSS3,建议使用Chrome,Firefox或者IE9等现代浏览器。

HTML

<nav>
  <ul>
       <li><a href="/">首页</a></li>
       <li><a href="/server.html">服务</a></li>
       <li><a href="/case.html">案例</a></li>
       <li><a href="/about.html">关于</a></li>
       <li><a href="/blog.html">BLOG</a></li>
  </ul>
</nav>

我们使用了HTML5标签nav,用它来定义导航链接,即navigation。接下来我们要用css来将导航菜单并排。

CSS

nav ul{width:500px;margin:20px auto;}
nav ul li{float:left; width:100px; height:24px; line-height:24px}

那么,当我们缩小屏幕的时候,要将横向菜单转换成下拉select菜单,如何处理呢?别着急,先要在html中创建一个select下拉菜单,方式有两种,一是直接在html中写一段select;二是通过javascriot动态生成select菜单。由于第一种方式会在html直接产生两个select不可取,因此我们采用第二种方式动态生成select。

jQuery

我们用jQuery来很方便的实现动态创建select。

$(function(){
	// 创建一个select标签
   $("<select />").appendTo("nav");

   // 创建默认选项 "Go to..."
   $("<option />", {
      "selected": "selected",
      "value"   : "",
      "text"    : "Go to..."
   }).appendTo("nav select");

   // 根据导航菜单中链接,获取下拉菜单选项,包括文本和链接
   $("nav a").each(function() {
       var el = $(this);
       $("<option />", {
           "value"   : el.attr("href"),
           "text"    : el.text()
       }).appendTo("nav select");
   });
   //当选中下拉框中的选项时实现跳转
   $("nav select").change(function() {
       window.location = $(this).find("option:selected").val();
   });
});

这个时候保存页面,预览可以发现有一个横向导航菜单和一个下拉select菜单,这两个菜单是同时存在的,那么要怎么才能达到不同屏幕尺寸显示不同的菜单效果呢?

回到CSS上面来,要实现切换效果需要借助CSS3利器Media Queries。

CSS

nav select {display: none;} //隐藏select
@media (max-width: 960px) {
  nav ul     { display: none; }
  nav select { display: inline-block; float:right; margin:20px 100px}
}

以上代码大意:先隐藏javascript生成的selelct菜单,当窗口尺寸小于960px时,隐藏横向导航菜单,显示下拉菜单。

在桌面浏览器上,当你改变窗口尺寸到达960像素的时候,就会看到布局的改变。需要注意的是,上面的max-width部分仅仅为了测试,如果你不希望用户在桌面浏览器中因为改变了窗口大小而导致你的布局改变,可以去掉max-width部分,而只针对那些移动设备。

现在你可以使用你手中的Iphone或者Android平台的手机访问地址http://www.helloweba.net/demo/menu2drop看看效果了。

声明:本文为原创文章,helloweba.net和作者拥有版权,如需转载,请注明来源于helloweba.net并保留原文链接:https://www.helloweba.net/javascript/176.html

6条评论

  • 压根就得不到效果,我用谷歌的

  • 虽然我没用 ios5.11 但是火狐是好使的

  • 所谓的响应式web设计,就是通过最新的css3多媒体查询技术来完成网页在不同分辨率下的适应效果,所以该技术能够很好的运用到iphone,ipad等移动设备,能够响应的开源项目有bootstrap,渴切-响应css框架等,如果要支持ie6~ie8可以参考kr.js解决方案,提供响应布局的服务商有p2h***以及 http://xy.keqie.com

  • 火狐有效果的,楼上可能没有改变游览器大小吧

  • 亲,火狐也没效果

  • iPhone iOS 5.1.1 毛用都没有自己去看~