【发布时间】：2021-01-25 12:48:44
【问题描述】：
我正在制作一个响应式导航栏，它会变成手机上的汉堡包图标。我使用媒体查询来检查手机并创建一个汉堡图标。然后我制作了一个移动菜单，当汉堡包图标被切换时它会出现和消失。这是我的代码：
HTML：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Responsive Nav Bar</title>
<link rel="stylesheet" href="style.css" />
<meta name="viewport" content="width=device-width,initial-scale=1.0">
</head>
<body>
<!-- Nav Bar -->
<nav>
<h2>Nav Bar</h2>
<div class="nav-left">
<a>Home</a>
<a>About</a>
<a>Blog</a>
<a>Contact</a>
</div>
<div class="nav-right">
<a>Log In</a>
<a>Sign Up</a>
</div>
<div class="mobile-nav">
<label for="toggle"><h2>☰</h2></label>
<input type="checkbox" id="toggle">
</div>
<div class="menu"> <!-- Mobile Menu -->
<a>Home</a>
<a>About</a>
<a>Blog</a>
<a>Contact</a>
<hr>
<a>Log In</button>
<a>Sign Up</button>
</div>
</nav>
</body>
</html>
SASS（使用编译器）：
// Fonts
@import url("https://fonts.googleapis.com/css2?family=Mukta&display=swap");
* {
margin: 0px;
padding: 0px;
}
// Navbar
nav {
width: auto;
padding: 30px;
background-color: #fafafa;
display: flex;
align-content: center;
flex-wrap: wrap;
h2 {
color: #303030;
font-family: "Mukta", sans-serif;
margin-right: 30px;
}
}
.nav-right {
margin-left: auto;
a {
margin-right: 15px;
margin-top: auto;
font-family: "Mukta", sans-serif;
text-decoration: none;
color: rgb(109, 109, 109);
transition: all 0.4s ease;
}
a:hover {
color: #26b1db;
}
}
.nav-left {
display: flex;
align-content: center;
a {
margin-right: 15px;
margin-top: auto;
font-family: "Mukta", sans-serif;
text-decoration: none;
color: rgb(109, 109, 109);
transition: all 0.4s ease;
}
a:hover {
color: #26b1db;
}
}
div.mobile-nav {
display: none;
label {
display: none;
}
#toggle {
display: none;
}
}
.menu { // Mobile Menu Styling, Display is none
width: 100vw;
font-family: "Mukta", sans-serif;
display: none;
flex-direction: column;
background-color: #fafafa;
z-index: 1000;
a {
margin: 5px 0px;
transition: all 0.4s ease;
}
a:hover {
color: #26b1db;
}
hr {
margin: 5px 0px;
border-color: #a3a3a3;
border-style: solid;
}
}
@media only screen and (max-width: 500px) {
div.mobile-nav {
width: auto;
height: 60px;
display: flex;
label {
display: block;
cursor: pointer;
margin-left: auto;
margin-top: auto;
margin-bottom: auto;
}
#toggle:checked + .menu { // Displaying the Menu
display: flex;
}
}
nav h2 {
font-size: 5vw;
margin-top: auto;
margin-bottom: auto;
margin-right: auto;
}
div.nav-left {
display: none;
}
div.nav-right {
display: none;
}
}
问题出在这一行：
#toggle:checked + .menu {
display: flex;
}
当点击汉堡图标时，它不显示菜单，而是保持它的显示被阻止。
我尝试过的事情：
- 将显示更改为在单击切换复选框时阻止
- 如here 所述，将未选中的显示设置为无，选中时显示为弹性
- 正如 Toni Michel Caubet 所说，将 .menu div 和 #toggle 复选框放在单个 div 中（此方法确实有效，谢谢，但它适用于像 h1 这样的单个元素，而不适用于包含许多元素的 div）
- 将 .menu div 和 #toggle 复选框放入 div 后更改组合器或分组
编辑：
在第 4 点，事情开始有所进展。当我将 + 更改为逗号以将它们分组时，菜单出现了。但是再次点击后它并没有关闭。我将显示更改为汉堡菜单的块，并在页面加载时选中了复选框。但是取消选中后，复选框消失了，但菜单没有。我需要解决这个问题。
注意：
我想在不使用 JavaScript 或 jQuery 的情况下完全使用 CSS（或 SASS）来实现
感谢您的帮助！
【问题讨论】：
-
您的问题是
.menu与复选框不在同一个容器中。所以:checked + menu不适用于菜单（丢弃标签）。您必须将输入置于与之前的菜单相同的级别。+运算符与直接兄弟一起使用
标签： html sass responsive-design navbar hamburger-menu