<template>
<div class="body">
<div class="nar-bar">
<div class="menu" @click="menuClick()">
<div :class="{ middleline: true, menulineactive: sidebarIsShow }">
<!--<div class="middleline"></div>-->
</div>
<p v-if="menuIsShow">MENU</p>
<p v-if="closeIsShow">CLOSE</p>
</div>
<transition name="sidebartransition"> //transition标签
<div class="sidebarbgc" v-if="sidebarIsShow">
<div :class="{ graybgc: true, graybgcactive: sidebarIsShow }"></div>
//外层的半透明灰色背景
<div class="sidebarwhite">
<div class="mbloginbefore" v-if="!isLoginFn">
<!--//与本例无关的一些占位内容↓↓↓-->
<div class="mblogin">
<button @click="gotoLogin()">LOGIN</button>
</div>
<div class="freeexp">
<button>無料体験会 / 体験予約</button>
</div>
</div>
</div>
</div>
</transition>
</div>
<router-view></router-view>
<bottom></bottom>
</div>
</template>
<script>
import bottom from '@/components/bottom'
export default {
data() {
return {
sidebarIsShow: false
}
},
methods: {
gotoLogin() {
},
menuClick() {
this.sidebarIsShow = !this.sidebarIsShow
}
},
components: {
bottom
}
}
</script>
<style lang="scss" scoped>
.body {
width: 100%;
.nar-bar {
margin: 0 auto;
width: 100%;
background: #ffed00;
height: 2rem;
line-height: 2rem;
}
.logo {
width: 64px;
}
.sidebarbgc {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.sidebartransition {
&-enter {
transform: translateX(-100%); //整体划入之前隐藏在最左侧
}
&-enter-active {
transition: all 0.5s ease; //划入过渡,用时0.5s
}
&-leave-to {
transform: translateX(-120%); //整体划出之后隐藏在最左侧,之所以设置为-120%,见后文
}
&-leave-active {
transition: all 0.5s ease; //划出过渡,用时0.5s
}
}
.graybgc {
position: absolute;
width: 100%;
height: 100%;
z-index: -1;
background-color: rgba($color: #000000, $alpha: 0.5);
}
.graybgcactive {
width: 120%; //当侧边栏显示时,即sidebarIsShow为true时,灰色滑块变动宽度为120%
}
.middleline {
z-index: 3;
display: inline-block;
line-height: 65px;
width: 55px;
height: 5px;
border-radius: 3px;
background-color: #ffffff;
position: relative;
transition: all 0.5s ease;
&::before { //前一条线
content: "";
position: absolute;
width: 55px;
height: 5px;
bottom: 17px;
border-radius: 3px;
background-color: #ffffff;
transition: all 0.5s ease;
}
&::after { //后一条线
content: "";
position: absolute;
width: 55px;
height: 6px;
top: 17px;
border-radius: 3px;
background-color: #ffffff;
transition: all 0.5s ease;
}
}
.menulineactive {
display: inline-block;
z-index: 3;
line-height: 65px;
width: 55px;
height: 5px;
border-radius: 3px;
background-color: #ffffff;
position: relative;
transform: rotate(45deg); //中间的线顺时针旋转45°
&::before {
content: "";
position: absolute;
width: 55px;
height: 5px;
bottom: 0px;
border-radius: 3px;
background-color: #ffffff;
transform: rotate(-90deg); //上方的线逆时针旋转90°
transition: all 0.5s ease;
}
&::after {
opacity: 0; //底部的线隐藏
}
}
}
</style>
手机菜单栏三条杠
最新推荐文章于 2021-07-02 19:58:40 发布
![](https://img-home.csdnimg.cn/images/20240711042549.png)