Почему мое меню гамбургера с помощью флажка не работает? - PullRequest
Новая
       25

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

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

Я пытаюсь сделать меню гамбургера, используя только HTML и CSS. Я попробовал это с https://www.youtube.com/watch?v=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>

1 Ответ

1 голос
/ 10 апреля 2019 
#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 (официальная спецификация): последующий брат-комбинатор .

...