移动端菜单展开关闭切换效果_移动端展开形式-CSDN博客

本文介绍如何使用CSS和JavaScript打造一个响应式的菜单按钮，通过hover效果实现实时的展开与关闭。通过`.menu-btn`的点击事件，控制`.wrap`的`menu-open`类状态，展示菜单的动态变化。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>关闭展开</title>
    <script src="https://www.jq22.com/jquery/1.9.1/jquery.min.js"></script>
  </head>

  <body>
    <div class="wrap">
      <div class="menu-btn m-show"><span class="line"></span></div>
    </div>

    <script>
      $('.menu-btn').on('click', function () {
        $('.wrap').hasClass('menu-open') ? $('.wrap').removeClass('menu-open') : $('.wrap').addClass('menu-open')
      })
    </script>
    <style>
      .wrap {
        position: relative;
      }
      .menu-btn {
        position: absolute;
        top: 100px;
        right: 50px;
        width: 100px;
        height: 100px;
        overflow: hidden;
        text-align: center;
        transform: translateY(-50%);
      }

      .menu-btn .line,
      .menu-btn .line:before,
      .menu-btn .line:after {
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        margin: auto;
        width: 100px;
        height: 5px;
        border-radius: 10px;
        background: #771127;
        border-radius: 10px;
      }
      .menu-btn .line {
        top: 0;
        bottom: 0;
        transition: border 0.3s;
        background: #771127;
        border-radius: 10px;
      }

      .menu-btn .line:before {
        transform: translateY(-40px);
      }
      .menu-btn .line:after {
        transform: translateY(40px);
      }

      .menu-btn .line:before,
      .menu-btn .line:after {
        content: '';
        transform-origin: 50% 50%;
        transition: transform 0.3s;
      }

      .menu-open {
        z-index: 999;
      }
      .menu-open .line {
        background: transparent;
      }
      .menu-open .line:before {
        transform: rotate(45deg);
      }
      .menu-open .line:after {
        transform: rotate(-45deg);
      }
    </style>
  </body>
</html>