对于我的网页（Github Page），我想让我的菜单适应屏幕的大小，这样当它们太小并且元素不适合时它就会折叠。我计划添加以下解决方案：w3schools，当屏幕较小时使用“burguer”图标来加入所有元素。
我可以使用不同的元素创建菜单，添加“burguer”图标，然后在屏幕很大时默认隐藏它。但是，媒体查询和js功能一定是错误的，因为当我缩小屏幕时，会出现“burguer”图标，但其他元素不会消失，并且单击“burguer”不会执行任何操作。我猜想某个地方的名称有错误或混淆id。可能是吗？
在 w3schools 的示例中使用了div选项卡，但我没有。示例的运行是必不可少的吗？
/* Toggle between adding and removing the "responsive" class to topnav when the user clicks on the icon */
function myFunction() {
var x = document.getElementById("nav");
if (x.className === "header_nav") {
x.className += " responsive";
} else {
x.className = "header_nav";
}
}
<html>
<head>
<title>Eduardo Alvarado</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" />
<link rel="stylesheet" href="assets/css/main.css" />
<noscript><link rel="stylesheet" href="assets/css/noscript.css" /></noscript>
<!-- Load an icon library to show a hamburger menu (bars) on small screens -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body class="is-preload">
<!-- Header Navigation Menu -->
<section id="header_nav">
<nav id="nav">
<ul>
<li>
<a href="index">
<p style="color:white">Home</p>
</a>
</li>
<li>
<a href="">
<p style="color:white">Research</p>
</a>
</li>
<li>
<a href="">
<p style="color:white">Game-dev</p>
</a>
</li>
<li>
<a href="photography">
<p style="color:white">Photography</p>
</a>
</li>
<li><a href="javascript:void(0);" class="icon" onclick="myFunction()"><i class="fa fa-bars"></i></a></li>
</ul>
</nav>
</section>
整个代码可以在仓库（Github Repo）中找到。
你能看到我无法发现的错误吗？为什么 w3school 的例子不适用？
我非常感谢你在这里的帮助。预先非常感谢您！
繁华开满天机
慕仙森
相关分类