Проблема CSS с вращением Sidemenu, чтобы выявить нижнюю сторону ⇐ Javascript

[Гость]

У меня есть проблема с моим раскрытием-сидену-цирком; Дело в том, что человек в том, чтобы нажать на значок, а затем кружок будет вращаться, и верхняя страница будет двигаться в сторону, чтобы раскрыть Li-Tag с опциями. Я должен отметить, что это также включает JS, и я также дважды проверил кериселекторы, а также Const и имел нулевые ошибки в консоли. Однако, даже со всем этим, мой Sidemenu все еще не работает; Каждый раз, когда я нажимаю на кнопку, это просто статична, и случается. Я включил весь свой исходный код ниже.

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

const fongola = document.getElementById('fongola');

const kanga = document.getElementById('kanga');

const container = document.querySelector('.container');

fongola.addEventListener('click', ()=> container.classList.add('lakisa-menu'));

kanga.addEventListener('click', ()=> container.classList.remove('lakisa-menu'));< /code>
.container{
background:#fafafa;
transform-origin:top left ;
transition: transform 0.5s linear;
width:100vw;
min-height:100vh ;
padding:50px;
}

.container .lakisa-menu{
transform: rotate(-20deg);

}

.circle-container{
position: fixed;
top:-100px;
left:-100px;

}

.circle{
background-color:#0063b4 ;
height:200px;
width:200px;
border-radius:50%;
position: relative;
transition:transform 0.5s linear;
}

/*  big blue SPINNER */
.container .lakisa-menu .circle{
transform: rotate(-70deg);

}

.circle button{
cursor:pointer;
position: absolute;
top:50%;
left:50%;
height:100px;
background:transparent;
border:0;
font-size:26px ;
color:#fff;

}

/* pseudo-class */
.circle button:focus{
outline:none;

}

.circle button#fongola{
left:60%;
}

.circle button#kanga{
transform:rotate(90deg);
transform-origin: top left;
top:60%;

}

.container .lakisa-menu + nav li{
transform: translateX(0);
transition-delay: 0.3s;

}

nav{
position: fixed;
bottom:40px;
left:0;
z-index: 1;
}

nav ul{
list-style-type: none;
padding-left: 30px;

}

nav ul li{
text-transform: uppercase;
color:#fff;
margin:40px 0;
transform: translateX(-100%);
transition: transform 0.4s ease-in;
}

nav ul li{
font-size:20px;
margin-right:10px;
}

nav ul li + li{
margin-left:15px;
transform:translateX(-150%);

}

nav ul li + li + li{
margin-left:30px ;
transfrom:translateX(-200%);

}< /code>




Porfolio
[*]





[list]

[*]

[/list]
























Josue 


On my days of I enjoy going out to the internet-cafe and sipping on a mocha latte.

Подробнее здесь: https://stackoverflow.com/questions/794 ... -underside