js css html 显示隐藏侧边菜单

最新推荐文章于 2023-03-13 15:59:48 发布

遗忘了的自己

最新推荐文章于 2023-03-13 15:59:48 发布

阅读量284

点赞数

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

本文链接：https://blog.csdn.net/qq_24078843/article/details/116302233

版权

html css js 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

<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>

其他：目前是通过 translateX 来隐藏侧边栏的，也可以结合动画来实现

在这里插入图片描述

遗忘了的自己

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js css html 显示隐藏侧边菜单

<html><head> <style> body { margin: 0; padding: 0; } .header { border: 1px solid #AAAAAA; height: 100px; } .container { display: flex; height: calc(100% - 100px); width:
复制链接

扫一扫

专栏目录