Witam!
Jestem kompletną nowicjuszką w kwestii JS i uczę się analizując tutoriale
Postępując zgodnie z powyższym --->
Chciałam zrobić takowe menu, które działa po kliknięciu
Niestety całość nie działa, czy ma ktoś pomysły co może być nie tak?
Kod HTML
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<title>Plastic</title>
<meta charset="utf-8">
<link rel="stylesheet" href="style.css" >
</head>
<body>
<h2> Main Page <h2>
<div class= "toggle" id="toggle">
</div>
<div class="menu" id="menu" onclick="menu-expand()">
<a href ="#"> <div class="past"> </div></a>
<a href ="#"> <div class="present"> </div> </a>
<a href ="#"> <div class="future"> </div </a>
</div>
<script>
var i = 0;
function expand(){
if (i==0){
document.getElementById("menu").style.transform="scale(1)";
i=1;
}
else{
document.getElementById("menu").style.transform="scale(0)";
i=0;
}
}
</script>
</body>
</html>
Kod CSS
h2{
text-align: center;
}
.toggle{
background-color: pink;
border-radius: 50%;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
cursor: pointer;
text-align: center;
height: 100px;
width: 100px;
transition: 0.7s;
}
.menu{
background-color: black;
height: 500px;
width: 500px;
transform: scale(0);
border-radius: 50%;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
text-align: center;
z-index: -1;
transition: 0.7s;
}
.past{
background-color: brown;
height: 100px;
width: 100px;
border-radius: 50%;
}
.present{
background-color: green;
height: 100px;
width: 100px;
border-radius: 50%;
}
.future{
background-color: blue;
height: 100px;
width: 100px;
border-radius: 50%;
}
.menu{
background: b
}
.menu a{
display: inline-block;
position: absolute;
transition: 0.4s;
}
.menu a:nth-child(1){
top: 60px;
left: 100px;
}
.menu a:nth-child(2){
top: 60px;
right: 100px;
}
.menu a:nth-child(3){
bottom: 60px;
left:200px;
}
.menu a:hover{
transform: scale(1.2);
}