CSS 汉堡菜单打开在下一个 div

Question

我创建了一个只有汉堡 CSS 的菜单，一切似乎都正常，除了当我尝试打开它时，菜单元素出现在 HTML代码（下一个div）。完整代码在这里：https://codepen.io/Cilvako/pen/wjwmJP

我觉得我错过了什么，但我不知道我做错了什么。

  <header>
        <div class="nav">
            <h1>Zero Gravity</h1>

                 <label for="toggle">&#9776</label>
                 <input type="checkbox" id="toggle"/>

          <div class="menu">
                <a href="#">About Us</a>
                <a href="#">Contact</a>
                <a href="#">Blog</a>
                <a href="#"><span>Free Trial</span></a>
          </div>
        </div>
    </header>

   <div class="main_content">
       <p>Bacon ipsum dolor amet short ribs tri-tip porchetta rump leberkas cupim shank turkey. Biltong hamburger jerky, ball tip sausage cupim tongue t-bone leberkas. Tri-tip porchetta jerky frankfurter shankle kevin andouille tail beef chuck swine sirloin strip steak corned beef. Meatloaf ham hock landjaeger kielbasa ribeye t-bone.</p>

   </div>

Answer 1

这完全取决于您希望菜单如何运作。您使用 CSS 显示它而不是使用任何 JS，我认为它非常好且轻巧。在此基础上，我建议您将菜单设置为简单地覆盖现有内容（就像它那样）并具有纯色背景（因为它目前没有）。您可以使用 background-color CSS 属性在 .menu 上设置背景颜色，您还需要添加 position: relative 以确保它显示为您想要它。

我为您制作了一个 codepen 以查看它的实际效果： http://jsbin.com/remadowagu/edit?html,css,output

如果您不想在您的内容之上显示您的菜单，而是希望您的内容向下移动到菜单下方，那么皮特上面的回答将为您解决这个问题。但是，我个人的偏好是将菜单覆盖在页面内容上，而不是将其向下推。

Answer 2

您只需要将 menu 中的元素合并为 menu-a，然后在 CSS 代码中使用 display: inline-block。

菜单代码看起来应该有点像这样：

<div class="menu">
  <a class="menu-a" href="#">About Us</a>
  <a class="menu-a" href="#">Contact</a>
  <a class="menu-a" href="#">Blog</a>
  <a class="menu-a" href="#"><span>Free Trial</span></a>
</div>

并将以下内容添加到 CSS 代码中：

menu-a {
  display: inline-block
}

Answer 3

我唯一做的就是将 float: left; 添加到 class --> menu .

在这种情况下，它会占据整个宽度 space ，也不会重复菜单边框线。

html, body {
  width: 100%;
  heigth: 100%;
  margin: 0;
  box-sizing: border-box;
}

html {
  font-family: "Helvetica", sans-serif;
}

.nav {
  border-bottom: 1px solid #00b3b3;
  text-align: right;
  height: 80px;
  line-height: 80px;

}

.nav h1 {
  float: left;
  margin: 0 0 0 10px;
  font-size: 20px;
  color: #00b3b3;
  
}

.menu {
  float: left;
  margin: 0 30px 0 0;
  text-align: center;
  width: 100%;
  display: none;
  clear: both;
}

.menu a {
  text-decoration: none;
  color: #00b3b3;
  margin: 0;
  display: block;
  line-height: 80px;
  border-bottom: 1px solid #00b3b3;
}

label {
  display: block;
  margin: 0 40px 0 0;
  font-size: 26px;
  line-height: 80px;
  cursor: pointer;
  width: 26px;
  float: right;
}

#toggle {
  display: none;
}

#toggle:checked + .menu {
    display: block;
  }

.main_content {
  clear: both;
  max-width: 80%;
  margin: auto;
  padding: 30px;
}

<header>
   <div class="nav">
        <h1>Zero Gravity</h1>
  
       <label for="toggle">&#9776</label>
        <input type="checkbox" id="toggle"/>
  
     <div class="menu">
           <a href="#">About Us</a>
           <a href="#">Contact</a>
           <a href="#">Blog</a>
           <a href="#"><span>Free Trial</span></a>
     </div>
      </div>
  </header>

<div class="main_content">
  <p>Bacon ipsum dolor amet short ribs tri-tip porchetta rump leberkas cupim shank turkey. Biltong hamburger jerky, ball tip sausage cupim tongue t-bone leberkas. Tri-tip porchetta jerky frankfurter shankle kevin andouille tail beef chuck swine sirloin strip steak corned beef. Meatloaf ham hock landjaeger kielbasa ribeye t-bone.</p>
    </br>
  <p>Jerky doner leberkas corned beef ham pork chop. T-bone frankfurter meatloaf beef, tail pancetta brisket spare ribs ribeye boudin jowl pork chop swine turducken venison. Pancetta cow venison tail tenderloin alcatra buffalo boudin capicola salami porchetta swine. Pork loin shankle ground round brisket burgdoggen bresaola capicola, chicken porchetta venison. Drumstick tenderloin porchetta, alcatra kielbasa rump picanha venison doner. Kevin ribeye capicola, chicken prosciutto strip steak meatball. Porchetta sausage shank, meatball andouille ham hock jowl t-bone. Spare ribs ball tip pancetta, frankfurter corned beef kielbasa shankle. Beef ribs porchetta t-bone capicola tail jowl flank rump drumstick. Bresaola filet mignon shoulder, prosciutto salami kielbasa cow chuck tail venison leberkas tenderloin.</p>
    </br>
  <p>Biltong short loin porchetta meatloaf pancetta. Kevin swine ham shankle, short ribs corned beef bresaola. Cupim pork kielbasa pork loin hamburger ribeye. Ham hamburger short loin chuck. Leberkas alcatra t-bone frankfurter kielbasa pastrami turducken. Hamburger shoulder swine capicola, brisket alcatra meatloaf rump chuck shank salami cupim kevin porchetta burgdoggen. Short ribs short loin tri-tip burgdoggen. Kevin ribeye capicola, chicken prosciutto strip steak meatball. Porchetta sausage shank, meatball andouille ham hock jowl t-bone. Spare ribs ball tip pancetta, frankfurter corned beef kielbasa shankle. Beef ribs porchetta t-bone capicola tail jowl flank rump drumstick. Bresaola filet mignon shoulder, prosciutto salami kielbasa cow chuck tail venison leberkas tenderloin.</p>
  

</div>

CSS 汉堡菜单打开在下一个 div

CSS Hamburger menu opening on top of next div

html

css

menu

hamburger-menu