html实现抽屉式效果

抽屉式效果是一种常见的网页交互效果，可以通过HTML、CSS和JavaScript来实现。下面是一种常见的实现方式：

HTML部分：

<div class="container">
  <button class="toggle-btn" onclick="toggleDrawer()">Toggle Drawer</button>
  <div class="drawer">
    <!-- 抽屉内容 -->
  </div>
  <div class="content">
    <!-- 主要内容 -->
  </div>
</div>

CSS部分：

.container {
  position: relative;
}

.drawer {
  position: absolute;
  top: 0;
  left: -300px; /* 初始时抽屉隐藏在左侧 */
  width: 300px;
  height: 100%;
  background-color: #f1f1f1;
  transition: left 0.3s ease-in-out; /* 添加过渡效果 */
}

.content {
  margin-left: 0; /* 初始时主要内容不受抽屉影响 */
  transition: margin-left 0.3s ease-in-out; /* 添加过渡效果 */
}

.drawer-open {
  left: 0; /* 打开抽屉时将抽屉移动到可见位置 */
}

.content-open {
  margin-left: 300px; /* 打开抽屉时将主要内容向右移动 */
}

JavaScript部分：

function toggleDrawer() {
  var drawer = document.querySelector('.drawer');
  var content = document.querySelector('.content');
  
  drawer.classList.toggle('drawer-open');
  content.classList.toggle('content-open');
}

以上代码实现了一个简单的抽屉式效果。点击按钮时，抽屉会从左侧滑出，主要内容会向右移动。再次点击按钮时，抽屉会滑回隐藏状态，主要内容会恢复原位。