Как сделать блок отображения класса с флажком - PullRequest
Новая
       53

Как сделать блок отображения класса с флажком

0 голосов
/ 12 января 2020

Я могу заставить его работать. Он работает с переключателем: флажок {display: none}, но не с дополнительным классом. 

 <nav>
        <div class="nav">
          <label class="hamburger__menu" for="toggle">&#9776</label>
          <input class="toggle" type="checkbox" id="toggle">
        </div>

        <div class="menu-box">
          <ul class="menu">
            <li class="menu__item"><a class="item__link" href="#">home</a></li>
            <li class="menu__item menu__item--yellow"><a class="item__link" href="#">humo@festivals</a></li>
            <li class="menu__item"><a class="item__link" href="#">humor</a></li>
            <li class="menu__item menu__item--red"><a class="item__link" href="#">video</a></li>
            <li class="menu__item"><a class="item__link" href="#">fotospecials</a></li>
            <li class="menu__item"><a class="item__link" href="#">nu in humo</a></li>
            <li class="menu__item"><a class="item__link" href="#">tv/film</a></li>
            <li class="menu__item"><a class="item__link" href="#">actua</a></li>
            <li class="menu__item"><a class="item__link" href="#">muziek</a></li>
            <li class="menu__item"><a class="item__link" href="#">boeken</a></li>
            <li class="menu__item"><a class="item__link" href="#">humo sapiens</a></li>
          </ul>
        </div>
      </nav>

.menu {
  display: none;
}

.toggle {
  display: none;

  &:checked + .menu {
    display: block;
  }
}

1 Ответ

0 голосов
/ 12 января 2020

вот ссылка на то, как кто-то сделал это всего за css https://codepen.io/erikterwan/pen/EVzeRP

, но javascript намного проще 

function toggle(){
var menu = document.getElementsByClassName('menu')[0];
if(menu.style.display==='')menu.style.display='block';
else if(menu.style.display==='block')menu.style.display='';
}
.menu {
  display:none;
}
<nav>
        <div class="nav">
          <label class="hamburger__menu" onclick='toggle()'>&#9776</label>
          
        </div>

        <div class="menu-box">
          <ul class="menu">
            <li class="menu__item"><a class="item__link" href="#">home</a></li>
            <li class="menu__item menu__item--yellow"><a class="item__link" href="#">humo@festivals</a></li>
            <li class="menu__item"><a class="item__link" href="#">humor</a></li>
            <li class="menu__item menu__item--red"><a class="item__link" href="#">video</a></li>
            <li class="menu__item"><a class="item__link" href="#">fotospecials</a></li>
            <li class="menu__item"><a class="item__link" href="#">nu in humo</a></li>
            <li class="menu__item"><a class="item__link" href="#">tv/film</a></li>
            <li class="menu__item"><a class="item__link" href="#">actua</a></li>
            <li class="menu__item"><a class="item__link" href="#">muziek</a></li>
            <li class="menu__item"><a class="item__link" href="#">boeken</a></li>
            <li class="menu__item"><a class="item__link" href="#">humo sapiens</a></li>
          </ul>
        </div>
      </nav>
...