我的博客导航栏中包含的内容比较多，包含首页、分类、归档等，还有一个搜索框。在手机端显示时，如果直接把导航栏的内容全部显示出来，必然会换行，影响美观。所以需要对导航栏进行自适应，当屏幕宽度小于一定值时，导航栏的内容自动隐藏，通过点击菜单按钮显示。 完整代码在https://github.com/lxmghct/lxmghct.github.io的_includes/header.html等文件中。

1. 实现思路

首先需要判断当前页面是否是手机端，这可以通过判断屏幕宽度来实现。然后通过点击菜单按钮显示导航栏的内容。这个可以通过现有的一些ui库来实现，也可以自己通过js来实现。

2. 实现过程

2.1 根据屏幕宽度选择性显示导航栏

可以使用bootstrap的col-{size}-{number}类来实现。其中size表示屏幕大小，有xs、sm、md、lg、xl五种，对应的像素值如下：

  • xs：小于576px
  • sm：大于等于576px
  • md：大于等于768px
  • lg：大于等于992px
  • xl：大于等于1200px col表示列，number表示占据的列数。例如col-md-6表示在中等屏幕上占据6列。隐藏可以用hidden-{size}类来实现。例如hidden-xs表示在小屏幕上隐藏。

宽度够时显示导航栏：

<div class="col-md-6 col-lg-6 hidden-sm hidden-xs center">
  <div class="site-nav">
    <ul class="nav nav-pills">
      <li class="select"><a href="/pages/classify.html">分类</a></li>
      <li class="select"><a href="/pages/archive.html">归档</a></li>
      <li class="select"><a href="/pages/tags.html">标签</a></li>
      <li class="select"><a href="/pages/about.html">关于</a></li>
    </ul>
  </div>
</div>

宽度不够时显示菜单按钮：

<!-- 宽度不够时显示 -->
<div class="hidden-lg hidden-md col-sm-4 col-xs-4">
  <div class="header-hidden-buttons">
    <i class="fa fa-search fa-lg search-icon"></i>
    <i class="fa fa-bars fa-2x menu-icon"></i>
    <!-- 用于控制菜单的显示和隐藏 -->
    <input type="checkbox" id="nav-trigger" class="nav-trigger">
  </div>
</div>

2.2 点击菜单按钮显示导航栏

这里我打算自己写一个下拉菜单。点击时显示导航栏内容，再次点击按钮或者其他任意空白处隐藏导航栏内容。实现思路是创建一个透明的勾选框，显示菜单时用js使其聚焦，然后通过勾选框的失去焦点事件来隐藏导航栏内容。

<input type="checkbox" id="nav-trigger" class="nav-trigger">

#nav-trigger {
    position: absolute;
    right: 0;
    opacity: 0; /* 隐藏，但是要能够触发失焦和聚焦事件，所以不能用display:none */
}
.phone-nav-show {
    display: block;
}

$("#nav-trigger").blur(() => {
  // 延时隐藏, 因为blur比click先触发
  setTimeout(() => {
    $(".phone-nav").removeClass("phone-nav-show");
  }, 100);
});
$(".header-hidden-buttons .menu-icon").click(() => {
  if (!$(".phone-nav").hasClass("phone-nav-show")) {
    $("#nav-trigger").focus();
    $(".phone-nav").addClass("phone-nav-show");
  }
});

3. 效果

宽屏时显示： 宽屏时显示

窄屏时显示： 窄屏时显示