Почему блок меню гамбургера не отображается при открытии? - PullRequest
0 голосов
/ 15 апреля 2019

Я пытаюсь использовать CSS Grid и Flexbox для создания моей веб-страницы.

Для заголовка я успешно внедрил логотип, чтобы он был встроен в навигацию для экранов, размер которых превышает 800 пикселей (только для примера), а при уменьшении размера экрана навигационные ссылки исчезают и появляется значок гамбургера. Большой! Только я не могу получить ссылки, чтобы появиться снова, когда я открываю меню гамбургера. Я пробовал разные варианты захвата блока ссылок путем выбора имени класса и идентификатора тега ul, а также разные варианты их отображения (то есть 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

1 Ответ

0 голосов
/ 15 апреля 2019

разобрался: Поскольку в блоке .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");
  });
...