CSS -Problem mit Sidemenu dreht sich, um Unterseite zu enthüllen ⇐ JavaScript

[Anonymous]

Ich habe ein Problem mit meinem Enthüllungsidemenu-Kreis; Der Punkt ist, dass die Person auf das Symbol klickt, und dann dreht sich der Kreis, und die obere Seite wird zur Seite bewegt, um einen Li-Tag mit Optionen zu enthüllen. Ich sollte beachten, dass es auch JS enthält, und ich habe auch die QuerySelectors und Const doppelt überprüft und habe keine Fehler in der Konsole. Trotzdem funktioniert mein Sidemenu immer noch nicht; Jedes Mal, wenn ich die Taste drücke, ist es nur statisch und bemerkt. Ich habe alle meinen Quellcode unten integriert.

Code: Select all

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.