Question

我正在学习HTML和CSS。我也在学习flexbox模型。我想建立一个网站，我正在使用移动优先方法来做到这一点。我想创建一个菜单，其中包含着名的汉堡，主要用于移动网站。当我打汉堡时，我希望班级菜单消失。有人可以帮我解决这个问题。谢谢。

<!-- language: lang-css -->


    .nav{
      display: flex;
      flex-direction: column;
      align-items: flex-end;
    }

    .menu{
      display: flex;
      flex-direction: column;
      align-items: center;
      display: none;
    }

    .burger{
      font-size: 30px;
    }

    .menu a{
      font-size: 30px;
    }

    #toggle:checked + .menu{
      display: block;
    }


<!-- language: lang-html -->
        <div class="nav">
          <div class="burger">
            <label for="toggle">&#9776;</label>
            <input type="checkbox" id="toggle"/>
          </div>
            <div class="menu">
                <a href="#">Business</a>
                <a href="#">Services</a>
                <a href="#">Learn More</a>
                <a href="#"><span>Free Trial</span></a>
            </div>
        </div>
    </body>



<!-- end snippet -->

Answer 1

您应该使用以下代码

Stack

无法使菜单消失

1 个答案: