响应式导航即是让导航变成响应式。常见的做法是在小屏幕时不将全部导航项目列出，而是显示一个导航图标，点击该图标时才会显示出完整导航。今天我们就来按照W3Schools的方法完成一个响应式导航。
视频连结
响应式导航（Responsive Navigation)
实现响应式导航的重点在于：
- 在大屏幕隐藏导航图标；显示全部导航项目。
- 在小屏幕隐藏大部分导航项目，只显示首页与导航图标，点击图标才显示其他项目。
- 当点击图标时，通过JavaScript为导航表加入
responsive类，功能是将导航项目垂直列出。
以下是响应式导航的HTML部分：
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<div class="topnav" id="myTopnav">
<a href="#home" class="active">Home</a>
<a href="#news">News</a>
<a href="#contact">Contact</a>
<a href="#about">About</a>
<a href="javascript:void(0);" class="icon" onclick="toggleNav()">
<i class="fa fa-bars"></i>
</a>
</div>
<div style="padding-left:16px">
<h2>Responsive Topnav Example</h2>
<p>Resize the browser window to see how it works.</p>
</div>
</body>
</html>首先，在<head>的部分用<link>载入了一个Font Awesome外部连结，为的是使用其中的导航图标。这一做法会载入Font Awesome的全部图标，而你真正用到的只有一个。如果你这样做，也可以利用Fontello选择你会用到图标，生成自己的图标web font，再载入到你的网页中。
可以看到topnav中的最后一条连结便是导航图标。这里使用javascript:void(0);让连结的跳转功能无效。再给了一个icon类以及设定了onclick事件函数为toggleNav。
再来看CSS的部分：
body {
margin: 0;
font-family: Arial, Helvetica, sans-serif;
}
.topnav {
overflow: hidden;
background-color: #333;
}
.topnav a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
.topnav a:hover {
background-color: #ddd;
color: black;
}
.active {
background-color: #4CAF50;
color: white;
}
.topnav .icon {
display: none;
}
@media screen and (max-width: 600px) {
.topnav a:not(:first-child) {
display: none;
}
.topnav a.icon {
float: right;
display: block;
}
.topnav.responsive {
position: relative;
}
.topnav.responsive .icon {
position: absolute;
right: 0;
top: 0;
}
.topnav.responsive a {
float: none;
display: block;
text-align: left;
}
}重点有二：先是.topnav .icon设为了不显示display: none;；接着是媒体请求，我们来详细看看。
第一组将除了第一个（首页）之外的导航项目全部隐藏。第二组是显示导航图标并让其靠右。
接下来的三组都是responsive的设定。主要是将图标固定于右侧，再来是显示导航项目，并让其占满整行。
最后来看JavaScript：
function toggleNav() {
var x = document.getElementById("myTopnav");
if (x.className === "topnav") {
x.className += " responsive";
} else {
x.className = "topnav";
}
}当点击图标时，取得myTopnav元素，并判断它的className是否只有topnav，若是则为它加入 responsive（注意有一空格在前），否则，将它重设为topnav。加入responsive类则是显示全部导航项目，也就是媒体请求最后三组的设定；没有responsive便是只显示首页的导航图标。
这是最常见的响应式导航的实现方法，其他方法或大同小异，或增加细节与功能。若想要瞭解更多，以下两种导航是我觉得值得一看的：
- 侧边栏滑入导航：改变
width，0为隐藏，滑入效果则是由transition实现。 - 全屏导航：改变
width和height；改动width是侧边滑入；改动height则是上下滑入。同样0为隐藏，滑入效果由transition实现。
W3Schools系列的代码都在GitHub上：W3Schools GitHub
W3Schools教学系列
W3Schools是知名的网页设计／前端开发教学网站，不仅提供HTML、CSS、JavaScript等的详尽教学，还可以把它当作说明文件（Documents）。有经验的前端或多或少已经接触过这个网站，因为它经常出现在搜索结果的前几项。其中，它的How To部分更是包含了大量非常实用的例子，例如，如何制作SlideShow（图片轮播）、Lightbox、Parallax（视差效果）等等。因此我想做一系列的影片专门介绍这些How To。
W3Schools系列全部视频：
