侧边栏固定，响应式布局，附带原生实现和Vue版本源码

最新推荐文章于 2024-08-17 22:36:14 发布

秦晨1998

最新推荐文章于 2024-08-17 22:36:14 发布

阅读量1.6k

点赞数 5

分类专栏：前端布局 test 文章标签： vue.js css3 html javascript

本文链接：https://blog.csdn.net/qc15867301542/article/details/122102982

版权

前端布局同时被 2 个专栏收录

1 篇文章 0 订阅

订阅专栏

test

1 篇文章 0 订阅

订阅专栏

效果如下

请添加图片描述

适用场景和介绍

该布局适用于后台管理，主页展示等。布局主要由三个部分组成：

顶部的导航栏，它被设计为fixed，时刻停留在页面顶部；
左侧的侧边栏，和右侧主体存在联动，当用户隐藏侧边栏时，右侧主体会填充整个页面。和导航栏一样，同样是fixed，确保用户时刻能看到侧边栏；
右侧的主体；

源码

原生HTML

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>布局</title>
  <style>
      * {
          margin: 0;
          padding: 0;
      }
      .header {
          height: 75px;
          width: 100vw;
          position: fixed;
          background-color: #000;
          color: white;
      }
      .body {
          display: flex;
      }
      .left {
          position: fixed;
          height: calc(100vh - 75px);
          width: 300px;
          background-color: rgba(255, 192, 203, 0.2);
          margin-left: 0;
          margin-top: 75px;
          transition: 1s;
          cursor: pointer;
          z-index: 0;
      }
      .right {
          flex: 1;
          display: flex;
          height: 200vh;
          margin-top: 75px;
      }
      .right .whitespace {
          width: 300px;
          margin-left: 0;
          transition: 1s;
      }
      .right .content {
          flex: 1;
          background: #ffffff;
          background: linear-gradient(225deg,#ffffff 0%, #000000 80%);
          background: -webkit-linear-gradient(225deg,#ffffff 0%, #000000 80%);
          background: -moz-linear-gradient(225deg,#ffffff 0%, #000000 80%);
      }
  </style>
</head>
<body>
  <div class="mainContainer">
    <div class="header">导航栏预留空间</div>
    <div class="body">
      <div class="left" onclick="changePosition()">侧边栏</div>
      <div class="right">
        <div class="whitespace"></div>
        <div class="content">正文内容</div>
      </div>
    </div>
  </div>

  <script type="text/javascript">
    function changePosition() {
      let left = document.querySelector('.left')
      let whitespace = document.querySelector('.whitespace')
      left.style.marginLeft = '-300px'
      whitespace.style.marginLeft = '-300px'

      // 可自行设计一个按钮用来控制侧边栏动作
      setTimeout(() => {
        left.style.marginLeft = 0;
        whitespace.style.marginLeft = 0;
      }, 1500)
    }
  </script>
</body>
</html>

Vue

<template>
  <div class="mainContainer">
    <div class="header">导航栏预留空间</div>
    <div class="body">
      <div class="left" @click="changePosition">侧边栏</div>
      <div class="right">
        <div class="whitespace"></div>
        <div class="content">正文内容</div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "ZTest",
  methods: {
    changePosition() {
      let left = document.querySelector('.left')
      let whitespace = document.querySelector('.whitespace')
      left.style.marginLeft = '-300px'
      whitespace.style.marginLeft = '-300px'

      // 可自行设计一个按钮用来控制侧边栏动作
      setTimeout(() => {
        left.style.marginLeft = 0;
        whitespace.style.marginLeft = 0;
      }, 1500)
    }
  }
}
</script>

<style scoped>
* {
  margin: 0;
  padding: 0;
}
.header {
  height: 75px;
  width: 100vw;
  position: fixed;
  background-color: #000;
  color: white;
}
.body {
  display: flex;
}
.left {
  position: fixed;
  height: calc(100vh - 75px);
  width: 300px;
  background-color: rgba(255, 192, 203, 0.2);
  margin-left: 0;
  margin-top: 75px;
  transition: 1s;
  cursor: pointer;
  z-index: 0;
}
.right {
  flex: 1;
  display: flex;
  height: 200vh;
  margin-top: 75px;
}
.right .whitespace {
  width: 300px;
  margin-left: 0;
  transition: 1s;
}
.right .content {
  flex: 1;
  background: #ffffff;
  background: linear-gradient(225deg,#ffffff 0%, #000000 80%);
  background: -webkit-linear-gradient(225deg,#ffffff 0%, #000000 80%);
  background: -moz-linear-gradient(225deg,#ffffff 0%, #000000 80%);
}
</style>