Fatal编程技术网
  • html/
  • Html 复选框不显示'；切换时，无法打开菜单

Html 复选框不显示'；切换时，无法打开菜单

html sass responsive-design

Html 复选框不显示'；切换时，无法打开菜单,html,sass,responsive-design,navbar,hamburger-menu,Html,Sass,Responsive Design,Navbar,Hamburger Menu,我正在制作一个反应灵敏的导航条，它会变成手机上的汉堡图标。我使用媒体查询来检查手机并创建一个汉堡包图标。然后我制作了一个移动菜单，当汉堡包图标被切换时，它会出现和消失。这是我的密码： HTML: 问题出在这一行： #toggle:checked + .menu { display: flex; } 单击汉堡包图标时，它不会显示菜单，而是将其显示保持为阻止 我尝试过的事情： 单击切换复选框时将显示更改为阻止 如前所述，将“未选中显示”和“选中时灵活显示”设置为“无” 正如Toni Miche

我正在制作一个反应灵敏的导航条，它会变成手机上的汉堡图标。我使用媒体查询来检查手机并创建一个汉堡包图标。然后我制作了一个移动菜单，当汉堡包图标被切换时，它会出现和消失。这是我的密码：

HTML: 问题出在这一行：

#toggle:checked + .menu {
  display: flex;
}
单击汉堡包图标时，它不会显示菜单，而是将其显示保持为阻止

我尝试过的事情：
  • 单击切换复选框时将显示更改为阻止
  • 如前所述，将“未选中显示”和“选中时灵活显示”设置为“无”
  • 正如Toni Michel Caubet所说，将.menu div和#toggle checkbox放在一个div中（这个方法确实有效，谢谢，但它可以使用单个元素，比如h1，而不是包含许多元素的div）
  • 更改组合符或分组。将菜单div和#toggle复选框放入div后
    • 编辑： 在第4点，事情开始有点进展。当我将+改为逗号将它们分组时，菜单出现了。但它在再次单击后没有关闭。我将显示更改为汉堡菜单的block，当页面加载时复选框被选中。但取消选中后，复选框消失，但菜单没有。我需要一个解决办法

    注: 我希望完全在CSS（或SASS）中实现这一点，而不使用JavaScript或jQuery

    谢谢你的帮助

    这里发生的事情很少。

    • 如评论中所述，问题在于您的复选框与移动导航不在同一容器中
    • 您还有一些
      标记，以
      结尾，这意味着您的html不正确
    解决方案
    • 将复选框的标签保留在其所在的位置
    • 将复选框移动为
      .menu
      的直接同级项
      然后调整css，将
      #toggle
      作为选择器，而不是
      div.mobile-nav#toggle

      toggle
      是一个id，您不需要有更强的特殊性，因为它是唯一的元素
    选择器的简短提示：
    .foo+.foo2

    此选择器将选择类为
    .foo2
    的每个元素，如果它们是类为
    .foo
    的元素的下一个同级元素
    因此，它们必须位于同一父节点中，并且彼此相邻

    <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>&#9776;</h2></label>
  </div>

  <-- I've moved the checkbox. Now the selector #toggle + .menu will work  -->
  <input type="checkbox" id="toggle"> 

  <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>
    您的问题是
    .menu
    与复选框不在同一容器中。因此
    ：选中+菜单
    不适用于菜单（放弃标签）。您必须将输入置于与之前的菜单相同的级别<代码>+运算符与直接同级一起工作 
    #toggle:checked + .menu {
  display: flex;
}

    <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>&#9776;</h2></label>
  </div>

  <-- I've moved the checkbox. Now the selector #toggle + .menu will work  -->
  <input type="checkbox" id="toggle"> 

  <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>

    // 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 { //#toggle is on it's own now, it doesn't need more specificity
    visibility: hidden;
    height: 0;
    width: 0;
  }
  #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;
  }
}