Vue侧导航栏的实现

布满荆棘的人生 2022-05-25 03:42 234阅读 0赞

<template>
    	<div class="sildebar">
    		<div class="home" @click="hideMenu">
    		侧导航栏侧导航栏侧导航栏侧导航栏
    	</div>
    		<div class="menu" v-show="isShows" @click="hideMenu"></div>
    
    		<transition name="slide-fade">
    			<div class="sss" v-show="isShow">
    				2222
    			</div>
    		</transition>
    	</div>
    </template>
    
    <script>
    	export default {
    		data () {
    			return {
    				isShow: false,
    				isShows: false
    			}
    		},
    		methods: {
    			hideMenu () {
    				if (this.isShow) {
    					this.isShow = false
    					this.isShows = false
    				} else {
    					this.isShow = true
    					this.isShows = true
    				}
    				
    			},
    		}
    	}
    </script>
    
    <style>
    	.sss{
    		color: #fff;
    		position: fixed;
        width: 286px;
        height: 100%;
        top: 0;
        left: 0;
        bottom: 0;
        z-index: 11;
        overflow-y: auto;
        background: #000;
    	}
    	.slide-fade-enter-active {
    	  transition: all .3s ease;
    	}
    	.slide-fade-leave-active {
    	  transition: all .3s cubic-bezier(1.0, 0.5, 0.8, 1.0);
    	}
    	.slide-fade-leave-to,.slide-fade-enter{
    	  transform: translateX(-286px);
    	  opacity: 0;
    	}
    	.menu {
        position: fixed;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        opacity: 1;
        z-index: 10;
        background: rgba(0,0,0,0.5);
    	}
    </style>

![20180507173712563][]

[20180507173712563]: /images/20220525/d76ca7c5613a41aaa4f2d7cdf8b346c2.png

发表评论取消回复

表情：

评论列表（有 0 条评论，234人围观）

还没有评论，来说两句吧...

相关阅读

相关 vue实现导航栏功能的方法

![f95fc25c33d64cc499d107f4ba0080f7.jpeg][] 在 Vue中实现导航栏功能，我们可以将导航栏作为一个单独的组件来实现。这样可以方便我们进

淡淡的烟草味﹌/ 2023年10月12日 10:01/ 0 赞/ 10 阅读

相关 php侧边栏导航效果,bootstrap实现简单侧边导航栏效果

本篇文章给大家介绍一下bootstrap侧边导航栏的实现方法。有一定的参考价值，有需要的朋友可以参考一下，希望对大家有所帮助。 ![ec862e11c6ccf6a4cf431

梦里梦外;/ 2023年01月14日 04:57/ 0 赞/ 372 阅读

相关侧边导航栏

<template> <el-container style="height: 100vh" class="menu_container">

阳光穿透心脏的1/2处/ 2022年11月25日 10:12/ 0 赞/ 337 阅读

相关 vue element menu侧边导航栏数据渲染

<template>  <!--unique

「爱情、让人受尽委屈。」/ 2022年10月29日 14:26/ 0 赞/ 35 阅读

相关 html侧边导航栏,浮动侧边导航栏的基本布局

先来一张效果图 ![a34e46fcb0a2][] 效果图 HTML JS Bin 头部内容左侧的一些内容首页学习中心考试中心考

短命女/ 2022年10月06日 11:46/ 0 赞/ 332 阅读

相关 js实现侧边导航栏展开和折叠

效果：左侧导航栏，点击展开，显示子菜单。再次点击，菜单折叠。代码： <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 T

╰半夏微凉°/ 2022年08月23日 05:46/ 0 赞/ 328 阅读

相关 Vue侧导航栏的实现

<template> <div class="sildebar"> <div class="home" @click="hideMenu">

布满荆棘的人生/ 2022年05月25日 03:42/ 0 赞/ 235 阅读

相关左中侧导航栏组件

![大笑][laugh.gif]2018.1.11 21:35pm 左中侧效果： ![Image 1][]![Image 1][]![Image 1][]![SouthEa

川长思鸟来/ 2021年10月09日 03:52/ 0 赞/ 314 阅读

相关手风琴导航栏侧边-jQuery实现-案例

效果展示： ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9n

朴灿烈づ我的快乐病毒、/ 2021年06月22日 15:36/ 0 赞/ 643 阅读

相关 CSS实现侧边栏导航

CSS实现侧边栏导航

小鱼儿/ 2021年05月03日 15:53/ 0 赞/ 671 阅读