注册登录

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

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

查看演示 下载源码

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

HTML

<nav>
  <ul>
       <li><a href="https://zhishitu.com"
       <li><a href="https://zhishitu.com"
       <li><a href="https://zhishitu.com"
       <li><a href="https://zhishitu.com"
       <li><a href="https://zhishitu.com"
  </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.zhishitu.net/demo/menu2drop看看效果了。

计算机