js css html 显示隐藏侧边菜单

最新推荐文章于 2022-04-16 20:13:08 发布

遗忘了的自己

最新推荐文章于 2022-04-16 20:13:08 发布

阅读量351

点赞数

分类专栏： html css js 文章标签：侧边菜单栏

本文链接：https://blog.youkuaiyun.com/qq_24078843/article/details/116302233

版权

html css js 专栏收录该内容

11 篇文章

订阅专栏

<html>

<head>
  <style>
    body {
      margin: 0;
      padding: 0;
    }

    .header {
      border: 1px solid #AAAAAA;
      height: 100px;
    }

    .container {
      display: flex;
      height: calc(100% - 100px);
      width: 100%;
    }

    .menu {
      position: relative;
      width: 150px;
      height: 100%;
      border: 1px solid #AAAAAA;
    }

    .arrow {
      width: 20px;
      height: 30px;
      line-height: 30px;
      text-align: center;
      position: absolute;
      top: 50%;
      right: 0;
      cursor: pointer;
      background: #B7B7B7;
      color: #FFFFFF;
    }

    ul {
      list-style: none;
      padding: 0;
    }
    ul li {
      width: 100%;
      height: 40px;
      line-height: 40px;
      display: block;
      text-align: center;
      cursor: pointer;
    }
    ul li:hover {
      background: #AAAAAA;
    }

    .content {
      flex: 1;
    }
  </style>
  <script>
    var isShow = true;
    function arrow() {
      isShow = !isShow;
      let menu = document.getElementById('menu');
      let arrow = document.getElementById('arrow');
      if (isShow) {
        menu.style.transform = "translateX(0)";
         menu.style.transition = "all 2s"; // 增加过渡效果
        arrow.style.right = "0";
        arrow.innerText = "<";
      } else {
        menu.style.transform = "translateX(-100%)";
         menu.style.transition = "all 2s"; // 增加过渡效果
        arrow.style.right = "-20px";
        arrow.innerText = ">";
      }
    }
  </script>
</head>

<body>
  <div class="header"></div>
  <div class="container">
    <div id='menu' class="menu">
      <ul>
        <li>菜单一</li>
        <li>菜单二</li>
      </ul>
      <span id="arrow" class="arrow" onclick="arrow()"><</span>
    </div>
    <div class="content">

    </div>
  </div>
</body>

</html>