HTML响应式导航菜单适应小屏幕设备

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来将导航菜单并排。

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代码用来很方便的实现动态创建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菜单，这两个菜单是同时存在的，要实现切换效果需要借助CSS3利器Media Queries。

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部分，而只针对那些移动设备。