Question

我正在尝试使用CSS Grid和Flexbox创建网页。

对于标题，我已经成功地将徽标实现为与大于800像素的屏幕的导航内嵌（例如，情况下），并且当屏幕缩小时，导航链接消失并且出现汉堡图标。大！只有，当我打开汉堡菜单时，无法重新显示链接。我尝试通过选择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");
  });

此不显示的原因是什么？还有显示/隐藏链接块的更好方法吗？

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

Answer 1

弄清楚了：由于.main-nav ul块具有display: none;并需要一些撤消操作，因此需要添加一个新的.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 个答案: