Как я могу использовать #checked для отображения / скрытия меню в адаптивном режиме?

Question

Я хочу создать адаптивную навигационную панель меню, и, согласно некоторым сайтам, я попытался установить флажок. К сожалению, я не могу заставить его работать по неизвестным мне причинам (было бы преувеличением сказать, что я в этом любитель). При установке / снятии отметки с кнопки ничего не происходит. Если есть другой более эффективный способ сделать это, поделитесь. Я не должен использовать ничего, кроме HTML и CSS, чтобы сделать это. Вот код. (Я знаю, что не должен публиковать его целиком, но я слишком неопытен, чтобы знать, что представляет ценность, а что нет - извините за это!)

html:

<nav>
        <!--logo-->
        <a href="#" class="logo">TBD</a>
        <!--meni-->
        <ul>
            <li><a href="#" class="active">Landing page</a></li>
            <li><a href="#">about me</a></li>
            <li><a href="#">gallery</a></li>
            <li><a href="#">blog</a></li>
            <li><a href="#">contact</a></li>
        </ul>
        <input type="checkbox" id="check">
  <label for="check" class="checkbtn">
    <i class="fas fa-bars"></i>
  </label>
</nav>

css:

    nav{
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 60px;
    background-color: #ffffff;
    box-shadow: 2px 2px 12px rgba(0,0,0,0.2);
    padding: 0px 5%;
}

nav ul li{
    float: right;
    display: inline-block;

}

nav ul li a{
    margin: 30px;
    font-family: calibri;
    color: #505050;
    font-size: 19px;
    font-weight: 700;
}

.checkbtn{
  font-size: 30px;
  color: white;
  float: right;
  line-height: 80px;
  margin-right: 40px;
  cursor: pointer;
  display: none;
}

#check{
  display: none;
}

...

@media screen and (max-width: 796px) {

    .checkbtn{
    display: block;
    margin-right: 40px;
    color: black;
    }
nav ul {
        margin: 0px;
        padding: 0px;
        background-color: #ebeef4;
        flex-direction: column;
        position: fixed;
        left: 0;
        top: 0;
        width: 100%;
        height: 100vh;
        box-sizing: border-box;
        display: flex;
        justify-content: center;
        align-items: center;
        z-index: 1;
        display: none;
    }

    nav ul li {
        padding: 10px;
        display: block;
    }

    nav ul li a{
        font-family: calibri;
        font-size: 1.4em;
        text-transform: uppercase;
        color: #5c5c5c;
    }

    nav ul li a:hover{
        color: #121212;
    }

    #check:checked ~ ul{
        display: block;
        left: 0;
        background: rgba(0,0,0,0.8);

    }

    nav.active ul {
        display: flex !important;
    }

Я действительно пытаюсь понять это, и еще раз прошу прощения за длинный пост. Ура!

Answer 1

Флажки - это входы, которые необходимо запускать по форме. Что вы хотите, чтобы произошло, когда он проверен?