这是一只前端小白，只会一点点Html、CSS和JavaScript，而且暂时不会Bootstrap框架和jQuery库，甚至也不会Canvas……而且如果改用Bootstrap框架需要对已有的网站大改，所以不得不尝试只用JavaScript实现。
一、实现思路
用Ps画一个背景透明的32px×32px导航栏图标nav.png。
@media screen and (min-width: 768px)大屏幕：
<style>导航栏图标{display:none}
@media screen and (min-width: 768px)小屏幕：
<style>初始：导航栏图标{display:inline}、导航栏项目{display:none}
<script>点击图标（单次）：导航栏项目{display:inline}
<script>点击图标（双次）：导航栏项目{display:none}
<script>窗口变化：如果是大屏幕，设置导航栏项目{display:inline}
二、代码全文
Html文件<head>部分
<link rel="stylesheet" type="text/css" href="style.css">
<style type="text/css">
@media screen and (min-width: 768px) {
ul.navigation li img {
display: none;
}
}
@media screen and (max-width: 768px) {
ul.navigation li {
float: none;
}
ul.navigation li img {
position: absolute;
left: 1em;
top: 1em;
display: inline;
}
ul.navigation li:not(:first-child) {
display: none;
}
}
#content {
text-align: center;
clear: right;
letter-spacing: 0.35em;
}
</style>
<script>
var clickTimes = 0;
function navIcon() {
var image = document.getElementById("clicknav");
image.onclick = clickOn;
}
function clickOn() {
clickTimes = clickTimes + 1;
if (clickTimes % 2 != 0) {
navDisplay("inline");
} else {
navDisplay("none");
}
}
function navDisplay(iorn) {
var linav = document.getElementsByClassName("nav")
for (j = 0, len = linav.length; j < len; j++) {
linav[j] = linav[j].style.display = iorn
}
}
window.onload = navIcon;
window.onresize = function() {
var winWidth = document.documentElement.clientWidth;
if (winWidth > 768) {
navDisplay("inline");
} else {
navDisplay("none");
}
}
</script>
Html文件<body>部分
<div id="header">
<ul class="navigation">
<li><img id="clicknav" src="media/nav.png" alt="navigationIcon"/></li>
<li class="nav"><a href="A.html">A</a></li>
<li class="nav"><a href="B.html">B</a></li>
<li class="nav"><a href="C.html">C</a></li>
<li class="nav"><a href="D.html">D</a></li>
<li class="nav"><a href="E.html">E</a></li>
<li class="nav"><a href="F.html">F</a></li>
</ul>
</div>
CSS文件部分
/* navigation */
ul.navigation {
font-size: 1em;
text-align: center;
letter-spacing:0.1em;
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden
}
ul.navigation li {float: left;}
ul.navigation li a {
color: #000000;
display: block;
text-align: center;
padding: 1em;
text-decoration: none;
}
三、其他尝试和经验总结
1.在写完后第一次测试中发现：当在浏览器小窗口点击两次图标让导航栏项目隐藏项目后，再放大窗口导航栏项目被隐藏。
尝试A：完善媒体查询：在@media screen and (min-width: 768px)中添加
结果：一点不好用
ul.navigation li:not(:first-child){
display:inline;
}
尝试B：窗口大小发生变化时重新载入页面
结果：体验很差
window.onresize=function(location=location)
尝试C：根据窗口大小发生变化次数和导航栏图标被点击次数判断修改display
结果：没写完，因为这种方法事倍功半，以下的代码是错误的草稿。
window.onresize=function(){
onresize_times = onresize_times + 1
if (onresize_times %2 == 0 && click_times %2 ==0){
navdisplay("inline");
}
}
2.document.getElementById()方法返回对拥有指定 ID 的第一个对象的引用，getElementsByClassName() 方法返回文档中所有指定类名的元素集合（伪数组），所以用getElementsByClassName()处理导航栏项目时需要用for循环遍历。
3.导航栏在整个页面加载完之后才能正常使用，以后需要再优化。