为什么汉堡包菜单块在打开时不显示？

Question

I'm trying to use CSS Grid and Flexbox for creating my webpage. 我正在尝试使用CSS Grid和Flexbox来创建我的网页。

For the header, I have successfully implemented the logo to be inline with the navigation for screens larger than 800px (just for example case), and when the screen is sized down the navigation links disappear and a hamburger icon appears. 对于标题，我已经成功实现了徽标，以便与大于800px的屏幕（例如大小写）一起导航，当屏幕尺寸缩小时，导航链接消失，并出现汉堡包图标。 Great! 大！ Only, I can't get the links to reappear when I open the hamburger menu. 只是，当我打开汉堡菜单时，我无法重新出现链接。 I tried different variations of grabbing the block of links through selecting the class name and id of the ul tag as well as different variations of displaying them (ie flex, block, inline-block, etc.), but nothing has worked. 我通过选择ul标签的类名和id以及显示它们的不同变体（即flex，block，inline-block等）尝试了抓取链接块的不同变体，但没有任何效果。

<div class="container">
  <header class="header">
    <div class="logo">
      <a href="index.html">WEBSITE LOGO</a>
        </div>
        <label class="hamburger hamburger--squeeze" aria-label="Open navigation menu" for="menu-toggle">
          <span class="hamburger-box">
            <span class="hamburger-inner"></span>
            </span>
        </label>
        <input type="checkbox" id="menu-toggle" />
        <nav class="nav">
          <ul class="main-nav" id="navigation">
              <li><a href="index.html">VISIT</a></li>
                <li><a href="about-us.html">ABOUT US</a></li>
                <li><a href="connect.html">CONNECT</a></li>
                <li><a href="resources.html">RESOURCES</a></li>
                <li><a href="get-the-app.html">GET THE APP</a></li>
            </ul>
        </nav>
  </header>
</div>

html {
  /* border-box box model allows us to add padding and border to our elements without increasing their size */
  box-sizing: border-box;
  /* A system font stack so things load nice and quick! */
  font-family: Georgia, serif;
  font-size: 14px;
  color: var(--darkBlue);
}

/*
  We inherit box-sizing: border-box; from our <html> selector
  Apparently this is a bit better than applying box-sizing: border-box; directly to the * selector
*/
*,
*:before,
*:after {
  box-sizing: inherit;
}

body {
  background: var(--white);
  min-height: calc(100vh - 100px);
  margin: 0;
}

.container {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-areas: 
  "header";
}

/* -------  GRID AREAS  ------- */

.header {
  grid-area: header;
  display: grid;
  grid-template-columns: 1fr 2fr 2fr;
  grid-template-areas: 
  "logo nav nav";
  align-items: center;
}

.logo {
  grid-area: logo;
}

.logo a {
  color: #008CE2;
  text-decoration: none;
}

.hamburger {
  display: grid;
  grid-area: menu-icon;
  justify-content: flex-end;
}

.nav {
  grid-area: nav;
  display: flex;
  justify-content: flex-end;
}

/* -------  NAVIGATION  ------- */

.main-nav {
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  padding: 0;
}

.main-nav li {
  list-style-type: none;
  text-align: center;
  display: grid;
}

.main-nav a {
  color: #008CE2;
  margin: 0px 2px;
  text-decoration: none;
  display: inline-block;
  padding: 0 10px;
}

.logo a:hover,.main-nav a:hover {
  color: #ff6600;
  transition: 0.2s ease;
}

.hamburger {
  display: none;
}

#menu-toggle {
  display: none;
}

#menu-toggle:checked + #navigation {
    display: flex;
}

/* ------- Media Queries ------- */

@media(max-width: 800px){

  .header {
    grid-area: header;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-areas: 
    "logo menu-icon";
  }

  .hamburger {
    display: flex;
    justify-content: flex-end;
  }

  .nav {
    position: relative;
    display: block;
  }

  .main-nav {
    display: none;
  }

  .main-nav li {
    display: block;
  }

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

}

// Look for .hamburger
  var hamburger = document.querySelector(".hamburger");
  // On click
  hamburger.addEventListener("click", function() {
  // Toggle class "is-active"
  hamburger.classList.toggle("is-active");
  });

What is the reason for this not displaying? 这不显示的原因是什么？ And is there a better method for displaying/hiding the block of links? 是否有更好的方法来显示/隐藏链接块？

https://codepen.io/halebales24/pen/VNMvRL https://codepen.io/halebales24/pen/VNMvRL

Answer 1

Figured it out: Since the .main-nav ul block had display: none; 弄清楚：因为.main-nav ul块有display: none; and something needed to undo that, by adding a new .is-open class so when it is open I can display my content: 以及需要撤消的东西，通过添加一个新的.is-open类，所以当它打开时我可以显示我的内容：

html {
  /* border-box box model allows us to add padding and border to our elements without increasing their size */
  box-sizing: border-box;
  /* A system font stack so things load nice and quick! */
  font-family: Georgia, serif;
  font-size: 14px;
  color: var(--darkBlue);
}

/*
  We inherit box-sizing: border-box; from our <html> selector
  Apparently this is a bit better than applying box-sizing: border-box; directly to the * selector
*/
*,
*:before,
*:after {
  box-sizing: inherit;
}

body {
  background: var(--white);
  min-height: calc(100vh - 100px);
  margin: 0;
}

.container {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-areas: 
  "header";
}

/* -------  GRID AREAS  ------- */

.header {
  grid-area: header;
  display: grid;
  grid-template-columns: 1fr 2fr 2fr;
  grid-template-areas: 
  "logo nav nav";
  align-items: center;
}

.logo {
  grid-area: logo;
}

.logo a {
  color: #008CE2;
  text-decoration: none;
}

.hamburger {
  display: grid;
  grid-area: menu-icon;
  justify-content: flex-end;
}

.nav {
  grid-area: nav;
  display: flex;
  justify-content: flex-end;
}

/* -------  NAVIGATION  ------- */

.main-nav {
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
  padding: 0;
}

.main-nav li {
  list-style-type: none;
  text-align: center;
  display: grid;
}

.main-nav a {
  color: #008CE2;
  margin: 0px 2px;
  text-decoration: none;
  display: inline-block;
  padding: 0 10px;
}

.logo a:hover,.main-nav a:hover {
  color: #ff6600;
  transition: 0.2s ease;
}

.hamburger {
  display: none;
}

#menu-toggle {
  display: none;
}

#menu-toggle:checked + #navigation {
    display: flex;
}

/* ------- Media Queries ------- */

@media(max-width: 800px){

  .header {
    grid-area: header;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-areas: 
    "logo menu-icon";
  }

  .hamburger {
    display: flex;
    justify-content: flex-end;
  }

  .nav {
    position: relative;
    display: block;
  }

  .main-nav {
    display: none;
  }

  .main-nav.is-open{
    display:block;
  }

  .main-nav li {
    display: block;
  }

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

}

// Look for .hamburger
  var hamburger = document.querySelector(".hamburger");
  var mainNav = document.querySelector(".main-nav");
  // On click
  hamburger.addEventListener("click", function() {
  // Toggle class "is-active"
  hamburger.classList.toggle("is-active");
  mainNav.classList.toggle("is-open");
  });

为什么汉堡包菜单块在打开时不显示？

问题描述

1 个解决方案

解决方案1
0 2019-04-15 01:04:09

为什么汉堡包菜单块在打开时不显示？

问题描述

1 个解决方案

解决方案1 0 2019-04-15 01:04:09

解决方案1
0 2019-04-15 01:04:09