我做了一个菜单按钮和一个菜单，但我不知道如何将它们连接在一起

Question

你好，我做了一个菜单按钮和一个菜单，但我不知道如何将它们链接在一起，当你点击菜单按钮时，菜单从顶部显示到中心，从0%的不透明度开始，当你点击菜单按钮时，它的不透明度达到100%，菜单关闭并消失，如果你能帮我的话，我会很感激。

这是代码

​

var menu = document.getElementById("menu");
menu.onclick = function(){
  menu.classList.toggle("openmenu");
}

body{
  background-color: #333;
}
a{
  text-decoration: none;
  color: inherit
}
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.container{
  width: 100%;
  height: 0vh;
  background: none;
  display: flex;
  align-items: top;
  justify-content: right;
}

.menu{
  width: 50px;
  height: 50px;
  margin: 3px;
  background-image: linear-gradient(to right, #072AC8, #1E91D6 );
  border-radius: 10px;
  cursor: pointer;
}

.menu div{
  width: 30px;
  height: 30px;
  margin: 10px;
  position: relative;
}

.menu span{
  background: #fff;
  width: 100%;
  height: 2.5px;
  border-radius: 1.25px;
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  transition: transform 0.5s, width 0.5s;
}

.menu .line-1{
  transform: translate(-50%, -12.5px);
}
.menu .line-3{  
  transform: translate(-50%, 10px);
}

.openmenu .line-1{
  transform: translate(-50%, -50%) rotate(-45deg);
}

.openmenu .line-3{
  transform: translate(-50%, -50%) rotate(45deg);
}
.openmenu .line-2{
  width: 0;
}

*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
}
.container2{
  background: #333;
  width: 100%;
  height: 100vh;
  display: flex;
  align-items: flex-start;
  justify-content: center;
}
nav{
  background: #fff;
  border-radius: 50px;
  padding: 10px;
  box-shadow: 0 25px 20px -20px #000;
}
nav ul li{
  list-style: none;
  display: inline-block;
  padding: 13px, 35px;
  margin: 10px;
  font-size: 18px;
  font: 500;
  color: #777;
  cursor: pointer;
  position: relative;
  z-index: 2;
  transition: color 0.5s;
}
nav ul li::after{
  content: '';
  background-image: linear-gradient(to right, #072AC8, #1E91D6 );
  width: 100%;
  height: 100%;
  border-radius: 30px;
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: -1;
  opacity: 0;
  transition: top 0.5s, opacity 0.5s;
}
nav ul li:hover{
  color: #fff;
}
nav ul li:hover::after{
  top: 50%;
  opacity: 1;
}

<div class="container"> 
  <div class="menu" id="menu">
    <div>
      <span class="line-1"></span>
      <span class="line-2"></span>
      <span class="line-3"></span>
    </div>
  </div>
</div>

<div class="container2">
  <nav>
    <ul>
      <li><a href="index.html">Home</a></li>
      <li><a href="projects.html">Projects</a></li>
      <li><a href="merch.html">Merch</a></li>
      <li><a href="about.html">About</a></li>
    </ul>
  </nav>
</div>

​

Answer 1

基本上，我所做的是在css中单击menu.and定义容器2.activecss时给容器2提供一个活动类。使其首先显示块，并在活动时灵活使用。

​

 var menu = document.getElementById("menu");
        const nav = document.getElementsByClassName("container2")[0];

        menu.addEventListener("click", () => {
            menu.classList.toggle("openmenu");
            nav.classList.toggle("active");
            })

body {
            background-color: #333;
        }

        a {
            text-decoration: none;
            color: inherit
        }

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;

        }

        .container {
            width: 100%;
            height: 0vh;
            background: none;
            display: flex;
            align-items: top;
            justify-content: right;
        }

        .menu {
            width: 50px;
            height: 50px;
            margin: 3px;
            background-image: linear-gradient(to right, #072AC8, #1E91D6);
            border-radius: 10px;
            cursor: pointer;
        }

        .menu div {
            width: 30px;
            height: 30px;
            margin: 10px;
            position: relative;
        }

        .menu span {
            background: #fff;
            width: 100%;
            height: 2.5px;
            border-radius: 1.25px;
            display: block;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            transition: transform 0.5s, width 0.5s;
        }

        .menu .line-1 {
            transform: translate(-50%, -12.5px);
        }

        .menu .line-3 {
            transform: translate(-50%, 10px);
        }

        .openmenu .line-1 {
            transform: translate(-50%, -50%) rotate(-45deg);

        }

        .openmenu .line-3 {
            transform: translate(-50%, -50%) rotate(45deg);

        }

        .openmenu .line-2 {
            width: 0;
        }

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;

        }

        .container2 {
            background: #333;
            width: 100%;
            height: 100vh;
            display: none;
            align-items: flex-start;
            justify-content: center;
        }

        .container2.active {
            display: flex;
        }

        nav {
            background: #fff;
            border-radius: 50px;
            padding: 10px;
            box-shadow: 0 25px 20px -20px #000;
        }

        nav ul li {
            list-style: none;
            display: inline-block;
            padding: 13px, 35px;
            margin: 10px;
            font-size: 18px;
            font: 500;
            color: #777;
            cursor: pointer;
            position: relative;
            z-index: 2;
            transition: color 0.5s;
        }

        nav ul li::after {
            content: '';
            background-image: linear-gradient(to right, #072AC8, #1E91D6);
            width: 100%;
            height: 100%;
            border-radius: 30px;
            position: absolute;
            top: 100%;
            left: 50%;
            transform: translate(-50%, -50%);
            z-index: -1;
            opacity: 0;
            transition: top 0.5s, opacity 0.5s;
        }

        nav ul li:hover {
            color: #fff;

        }

        nav ul li:hover::after {
            top: 50%;
            opacity: 1;
        }

<div class="container">
        <div class="menu" id="menu">
            <div>
                <span class="line-1"></span>
                <span class="line-2"></span>
                <span class="line-3"></span>
            </div>
        </div>
    </div>
    <div class="container2 ">
        <nav>
            <ul>
                <li><a href="index.html">Home</a></li>
                <li><a href="projects.html">Projects</a></li>
                <li><a href="merch.html">Merch</a></li>
                <li><a href="about.html">About</a></li>
            </ul>
        </nav>
    </div>

​