Interaktywne menu

0

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);
}

1

Co to znaczy "nie działa"?

1

Masz masę błędów w swoim kodzie.
Lekko poprawiony html:

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <title>Plastic</title>
    <meta charset="utf-8">
    <link   rel="stylesheet" href="style.css" >
<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>
  </head>
  <body>
    <h2> Main Page <h2>
<div class= "toggle" id="toggle" onclick="expand()">
    <div class="menu" id="menu" >
      <a href ="#"> <div class="past"> </div></a>
      <a href ="#"> <div class="present"> </div> </a>
      <a href ="#"> <div class="future"> </div> </a>
    </div>
</div>
</body>
</html>

div z klasą "menu" jest za mały aby w niego kliknąć, chociaż możliwe że zależy to od przeglądarki.
Całość chyba udałoby się wykonać na czystym css.
Bardzo zła praktyka onclick="expand()". Wydziel to do pliku JS w końcowym projekcie.

CSS:
błąd tutaj:

...
.menu{
  background: b
}
...

1 użytkowników online, w tym zalogowanych: 0, gości: 1