PC端封装侧边导航

周亚鑫

于 2024-02-22 10:30:20 发布

阅读量232

点赞数 5

分类专栏： vue js css 文章标签： css css3 html

本文链接：https://blog.csdn.net/q4717529/article/details/136226728

版权

vue 同时被 3 个专栏收录

121 篇文章 14 订阅

订阅专栏

24 篇文章 0 订阅

订阅专栏

css

18 篇文章 0 订阅

订阅专栏

本文介绍了如何使用Vue.js和CSS实现一个可切换的PC端侧边导航栏，通过组件化设计和CSS样式控制其显示、隐藏、固定及动画效果。

摘要由CSDN通过智能技术生成

`PC端封装侧边导航`

在这里插入图片描述

template

 <div v-if="showBox == false" class="leftShow" @click.stop="toggleBox"></div>
    <div class="container" :class="{ show: showBox, fixed: fixedBox }">
      <div class="arrow" @click="toggleBox"></div>
      <div class="content">
        <!-- 盒子内容 -->
        <div class="img1" @click="$router.push('/home/home')"></div>
        <div class="img2"></div>
        <div class="img3" @click="$router.push('/scenarios/home')"></div>
      </div>
    </div>

js

<script>
  export default {
    components: {
    },
    data() {
      return {
        showBox: false, // 控制盒子显示和隐藏
        fixedBox: false, // 控制盒子固定和取消固定
      }
    },
    watch: {},
    mounted() {},
    methods: {
      toggleBox() {
        this.showBox = !this.showBox
        if (this.showBox) {
          this.fixedBox = true
        } else {
          this.fixedBox = false
        }
      },
    },
  }
</script>

css

  .leftShow {
    width: 50px;
    height: 114px;
    position: absolute;
    top: 50%;
    left: 0;
    transform: translate(0, -50%);
    background: url(~@/assets/imgs/home/sy_wzk@2x.png) no-repeat;
    background-size: contain;
    cursor: pointer;
    z-index: 3;
  }
  .container {
    position: fixed;
    left: -336px; /* 初始位置在左侧隐藏 */
    top: 50%;
    transform: translateY(-50%);
    width: 336px;
    height: 1080px;
    transition: left 0.5s; /* 过渡效果 */
    z-index: 888;
    background: url(~@/assets/imgs/home/sy_yzk@2x.png) no-repeat;
    background-size: contain;
  }

  .container.show {
    left: 0; /* 划出后固定在左侧中间 */
  }

  .container.fixed {
    position: fixed; /* 固定位置 */
  }

  .arrow {
    width: 50px;
    height: 114px;
    cursor: pointer;
    position: absolute;
    right: 40px;
    top: 50%;
    transform: translate(0, -50%);
    display: flex;
    align-items: center;
  }

  .content {
    padding: 10px;
    position: relative;
    .img1 {
      position: absolute;
      top: 358px;
      left: 30px;
      width: 191.41px;
      height: 65.89px;
      background: url(~@/assets/imgs/home/sy_sy@2x.png) no-repeat;
      background-size: contain;
      cursor: pointer;
    }
    .img2 {
      position: absolute;
      top: 504px;
      left: 30px;
      width: 191.41px;
      height: 65.89px;
      background: url(~@/assets/imgs/home/sy_yzd@2x.png) no-repeat;
      background-size: contain;
      cursor: pointer;
    }
    .img3 {
      position: absolute;
      top: 651px;
      left: 30px;
      width: 191.41px;
      height: 65.89px;
      background: url(~@/assets/imgs/home/sy_yycj@2x.png) no-repeat;
      background-size: contain;
      cursor: pointer;
    }
  }```