CSS - 创建响应式顶部导航菜单
对于我的网页（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 的例子不适用？
我非常感谢你在这里的帮助。预先非常感谢您！
郎朗坤2回答
-
繁华开满天机
这是一个基于您的代码的小型可重现解决方案： https://jsfiddle.net/hneromu4/5/我添加了一个固定到链接元素的类，当我们调整窗口大小时，这些元素应该保留：<section id="header_nav"> <nav id="nav"> <ul> <li class="fixed"><a href="">Home</a></li> <li><a href="">Research</a></li> <li><a href="">Game-dev</a></li> <li><a href="photography">Photography</a></li> <li class="fixed hamburguer"><a href="javascript:void(0);" class="icon" onclick="myFunction()"><i class="fa fa-bars"></i></a></li> </ul> </nav></section>我还调整了你的 css 和 js。 -
慕仙森
在你的 CSS 和 HTML 中，我做了一些修改，因为你的汉堡菜单位于你试图隐藏的同一个东西中，这并不是一个好主意，我还稍微调整了你的 CSS，因为你将位置设置为相对位置，但没有设置显示阻止。希望这可以帮助！CSS（第 2525 - 2547 行）： @media screen and (max-width: 600px) { #nav {display: none;} #header_nav a.icon { float: right; display: block; } } /* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens (display the links vertically instead of horizontally) */ @media screen and (max-width: 600px) { #nav.responsive {position: relative;display: block;} #header_nav.responsive a.icon { position: absolute; right: 0; top: 0; } #nav.responsive a { float: none; display: block; text-align: left; } }HTML：<!-- Header Navigation Menu --> <section id="header_nav"> <a class="icon" onclick="myFunction()"><i class="fa fa-bars"></i></a><nav id="nav" class="header_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> </ul> </nav> </section>
随时随地看视频慕课网APP
相关分类
Html5