相应式导航等于让导航变成相应式。罕见的做法是在小屏幕时不将悉数导航项目列出，而是显现一个导航图标，点击该图标时才会显现出完全导航。本日我们就来根据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系列悉数视频：
