网页侧边弹出栏的简单实现（在当前窗口而不是固定位置）

最新推荐文章于 2025-04-14 12:08:43 发布

qq_52161116

最新推荐文章于 2025-04-14 12:08:43 发布

阅读量891

点赞数

文章标签： css html 前端 vue javascript

本文链接：https://blog.youkuaiyun.com/qq_52161116/article/details/131009102

版权

1.首先我们创建主页面和侧边弹出框

<div>
    <button @click="showSidebar">Open Sidebar</button>
    <div class="main-content">
      <!-- 主页面 -->
    </div>
    <div class="sidebar" :class="{ 'sidebar-open': sidebarVisible }">
      <!-- 侧边栏 -->
      <button @click="hideSidebar">Close Sidebar</button>
    </div>
  </div>

2.设置css样式

第一步：为了使侧边栏在当前窗口内弹出我们将侧边栏的position设置为fixed。

第二步：使用css的transform translateX()属性将侧边栏放在窗口外。

.sidebar {
  position: fixed;
  top: 0;
  left: -100%; /* 将侧边栏放在窗口外 */
  width: 300px;
  height: 100%;
  background-color: #ccc;
  transition: transform 0.3s ease-in-out; /* 添加过渡效果 */
}
.sidebar-open {
  transform: translateX(100%); /* 将侧边栏移回窗口内 */
}

3.侧边栏的弹出和关闭

通过给侧边栏动态添加class来控制，在方法中我们改变sidebarVisible的值，为true时显示，为false则隐藏

data() {
    return {
      sidebarVisible: false,
    };
  },
  methods: {
    showSidebar() {
      this.sidebarVisible = true;
    },
    hideSidebar() {
      this.sidebarVisible = false;
    },
  },