Почему мое гамбургер-меню с флажком не работает?

Я пытаюсь сделать меню гамбургера, используя только HTML и CSS. Пробовал с https://thewikihow.com/video_xMTs8tAapnQ. Теперь я не знаю, почему мой код не работает.

header{
    background-color: #f1f1f1;
    text-align: center;
}

.inline{
    display: flex;
    justify-content: space-around;
    align-items: center;
}

header .primary #toggle{
    display: none;
}

header .primary #toggle:checked ~ header .primary nav{
    display: block;
} 

header .primary label{
    font-size: 2.25rem;
    display: block;
    cursor: pointer;
}

header .primary nav{
    display: none;
}

header nav ul{
    font-size: 1.25rem;
}


header .primary nav ul li{
    padding: 1rem;
}

header nav ul li a{
    text-decoration: none;
    color: #000000;
}

header nav ul li.active{
    border-bottom: 2px solid black;
    margin: 0 5%;
}

<header>
      <div class = "primary">
      <div class = "inline">
       <img src = "./image/logo.png" alt = "LOGO">
       <input type = "checkbox" id = "toggle">
       <label for = "toggle">&#9776;</label>
       </div>
        <nav>
            <ul>
                <li class = "active"><a href = "./index.html">Home</a></li>
                <li><a href = "./about.html">About</a></li>
                <li><a href = "./contact.html">Contact</a></li>
            </ul>
        </nav>
    </div>
  
    </header>

Поскольку nav не брат #toggle, они находятся в разных контейнерах. Вам нужно, чтобы то, что вы пытаетесь отобразить, было рядом с вводом...

— 10.04.2019 01:04

html css hamburger-menu

10.04.2019 00:46

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

Toor - Ангулярный шаблон для бронирования путешествий

Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...

1 290

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

#toggle:checked ~ header .primary nav

нацелен на <nav> внутри class = "primary" внутри <header>, который является последующим братом вашего #toggle:checked.

Итак, вам нужно поместить <input> перед <header>, вот так:

<input id = "toggle" type = "checkbox">
<header>
   <div class = "primary">
      <nav>...</nav>
   </div>
</header>

Рабочий пример:

header {
  background-color: #f1f1f1;
  text-align: center;
}

.inline {
  display: flex;
  justify-content: space-around;
  align-items: center;
}

#toggle {
  display: none;
}

header .primary label {
  font-size: 2.25rem;
  display: block;
  cursor: pointer;
}

header .primary nav {
  display: none;
}

#toggle:checked~header .primary nav {
  display: block;
}

header nav ul {
  font-size: 1.25rem;
}

header .primary nav ul li {
  padding: 1rem;
}

header nav ul li a {
  text-decoration: none;
  color: #000000;
}

header nav ul li.active {
  border-bottom: 2px solid black;
  margin: 0 5%;
}

<input type = "checkbox" id = "toggle">
<header>
  <div class = "primary">
    <div class = "inline">
      <img src = "./image/logo.png" alt = "LOGO">
      <label for = "toggle">&#9776;</label>
    </div>
    <nav>
      <ul>
        <li class = "active"><a href = "./index.html">Home</a></li>
        <li><a href = "./about.html">About</a></li>
        <li><a href = "./contact.html">Contact</a></li>
      </ul>
    </nav>
  </div>

</header>

MDN: Комбинаторы CSS.

W3C (официальная спецификация): последующий родственный комбинатор.

10.04.2019 01:08