css & html панель навигации должна появляться, когда флажок установлен - PullRequest
Новая
       23

css & html панель навигации должна появляться, когда флажок установлен

0 голосов
/ 15 февраля 2020

Я попытался с помощью двух селекторов одноуровневых элементов (~, как в фрагменте, и +), чтобы строка nav появлялась, когда флажок установлен, но он не работает, и при этом я не знать, что еще делать. 

nav {
  left: -100%;
  position: fixed;
}

#check:checked~nav {
  left: 0;
}
<input type="checkbox" id="check"><label for="check"><i class="fas fa-bars"></i></label></div>
<nav>
  <ul>
    <li><a href="">Test</a></li>
    <li><a href="">Test</a></li>
    <li><a href="">Test</a></li>
  </ul>
</nav>

1 Ответ

1 голос
/ 15 февраля 2020

Вот как должен выглядеть ваш код: сначала у вас есть закрытый тег <div>, а для + выберите один из вариантов, отметьте флажок выше * 

nav{
    left: -100%;
    position: fixed;

}

#check:checked + nav{
    left: 0px;
}
<label for="check"><i class="fas fa-bars"></i></label>
<input type="checkbox" id="check">
    <nav>
    <ul><li><a href="">Test</a></li>
        <li><a href="">Test</a></li>
        <li><a href="">Test</a></li>
    </ul>
    </nav>

, и если вы хотите иметь тот же порядок для тега, измените селектор CSS на: 

nav{
    left: -100%;
    position: fixed;
}

#check:checked + label + nav{
    left: 0px;
}
<input type="checkbox" id="check">
<label for="check"><i class="fas fa-bars"></i></label>
<nav>
  <ul>
    <li><a href="">Test</a></li>
    <li><a href="">Test</a></li>
    <li><a href="">Test</a></li>
  </ul>
</nav>
...