Я пытаюсь создать раскрывающееся меню гамбургера, но не знаю, как связать его с флажком, который должен вызывать раскрыв ⇐ CSS

[Anonymous]

Я пробовал использовать #active:checked ~.dropdown, чтобы связать действие раскрывающегося списка, появляющееся и исчезающее при нажатии, с флажком значка меню/закрытия, но, похоже, это не работает. Считаете ли вы, что это возможно сделать только с помощью html css, или мне придется использовать сценарий Java для достижения результатов. Около месяца я практиковался в CSS и HTML и смотрел, как далеко я смогу обойтись без них. Как вы думаете, пора ли мне начать использовать JavaScript?

Код: Выделить всё

* {
font-family: "Poppins", sans-serif;
margin: 0;
padding: 0;
}

html, body {
width: 100%;
height: 100%;
}

body {
height: 100vh;
}

:root {
--signbutton: #4C5FD5;
--searchbackground: #dadbf1;
--navfooter: #000000;
--background: #fff;
}

nav {
display: flex;
background: #000000;
color: var(--background);
height: 10vh;
align-items: center;
}

nav .title {
display: flex;
margin-right: auto;
align-items: center;
}

nav .buttons {
display: flex;
align-items: center;
height: 10px;
}

.title h1 {
font-size: 28px;
}

.divider {
width: 2px;
height: 30px;
background-color: #fff;
margin: 7px ;
}

.responsivebtn {
position: relative;
}

.close, .menu {
cursor: pointer;
right: 100px;
position: absolute;
display: none;
}

.menu-icon {
display: flex;
align-items: center;
cursor: pointer;
}

.close, .menu {
position: absolute;
top: 0;
right: 0;
display: none;
}

#active:not(:checked) ~ .menu-icon .menu {
display: block;
}

#active:checked ~ .menu-icon .close {
display: block;
}

#active {
display: none;
}

.dropdown {
background-color: #1f1e1e;
color: #fff;
width: 100%;
height: 24%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
font-size: 30px;
}

.margin {
margin-top: 8px;
width: 50%;
height: 2px;
background-color: #dadbf1;
}

.dropdown p {
margin-top: 5px;
}

Код: Выделить всё

Document








[img]icons8-logo-50.png[/img]
Abstract

Help Center



















Submit request

Sign in

Подробнее здесь: https://stackoverflow.com/questions/787 ... ow-to-conn