基于VUE的可隐藏的顶部菜单栏组件

效果图：

<template><nav class="menu"><a><div>HOME</div></a><ul><li>HOME11111</li><li>HOME22222</li><li>HOME33333</li></ul><a><div>HTML</div></a><ul><li>HTML11111</li><li>HTML22222</li><li>HTML33333</li></ul><a><div>CSS</div></a><ul><li>CSS11111</li><li>CSS22222</li><li>CSS33333</li></ul><a><div>JS</div></a><ul><li>JS11111</li><li>JS22222</li><li>JS33333</li></ul><a><div>ABOUT</div></a><ul><li>ABOUT11111</li><li>ABOUT22222</li><li>ABOUT33333</li></ul></nav>
</template><script>
export default {mounted() {document.addEventListener("mousemove", function () {if (event.y <= 20) {document.querySelector(".menu").style.transform = "translate(0,400px)";}});document.querySelector(".menu").addEventListener("mouseleave", function () {this.style.transform = "translate(0,-400px)";});},
};
</script><style>
.menu {position: absolute;left: 0;top: -400px;width: 100%;height: 50px;background-color: black;transition: 1s;z-index: 100;display: flex;justify-content: space-evenly;align-items: center;padding: 0;margin: 0;
}.menu a {display: flex;width: 20%;justify-content: space-evenly;align-items: center;opacity: 0.5;height: 100%;cursor: pointer;
}
.menu a:hover {opacity: 1;
}
.menu a:hover + ul {opacity: 1;
}.menu a div {width: auto;height: auto;font-size: 5%;font-weight: bold;color: white;
}.menu ul {position: absolute;width: 20%;height: auto;left: 0;top: 50px;opacity: 0;background-color: black;padding: 0;margin: 0;transition: 0.5s;
}
.menu ul:nth-child(2) {left: 0;
}
.menu ul:nth-child(4) {left: 20%;
}
.menu ul:nth-child(6) {left: 40%;
}
.menu ul:nth-child(8) {left: 60%;
}
.menu ul:nth-child(10) {left: 80%;
}
.menu ul:before {content: "";position: absolute;left: 0;top: -20px;width: 100%;height: 20px;
}
.menu ul:hover {opacity: 1;
}.menu ul li {list-style: none;text-align: center;font-size: 5%;font-weight: bold;color: white;opacity: 0.5;padding: 5px 0 5px 0;cursor: pointer;
}
.menu ul li:hover {opacity: 1;
}
</style>

基于VUE的可隐藏的顶部菜单栏组件相关推荐

中的隐藏鼠标菜单_Mac移动隐藏删除顶部菜单栏图标教程
本次小编教您如何移动隐藏删除mac菜单栏图标,对于有强迫症的小伙伴来说,菜单栏图标乱糟糟的是一件很烦人的事情,逼死强迫症,而这篇Mac移动隐藏删除顶部菜单栏图标教程则可以帮助你! Mac移动隐藏删除顶 ...
一个基于vue和element-ui的树形穿梭框组件
el-tree-transfer 简介因为公司业务使用vue框架,ui库使用的element-ui.在市面上找到一个好用的vue树形穿梭框组件都很难,又不想仅仅因为一个穿梭框在element-ui之 ...
Vue+element UI实现“回到顶部”按钮组件
版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog.csdn.net/caomage/article/details/85006973 背景开发框架是vue+webpac ...
基于vue和elementUI封装框选表格组件
前言:主要是 table 表格框选功能实现功能如下: 表格框选功能右键操作功能(删除.查看.编辑) 分页功能表头分类筛选功能回显功能(显示默认选中数据) 排序功能行禁用不可选功能不说废话, ...
基于Vue的事件响应式进度条组件
写在前面找了很多vue进度条组件,都不包含拖拽和点击事件,input range倒是原生包含input和change事件,但是直接基于input range做进度条的话,样式部分需要做大量调整和兼容 ...
基于Vue+ElementUI的省市区地址选择通用组件
一.缘由在项目开发过程中,有一个需求是省市区地址选择的功能,一开始想的是直接使用静态地址资源库本地打包,但这种方式不方便维护,于是放弃.后来又想直接让后台返回全部地址数据,然后使用级联选择器进行选择 ...
vue可视化拖拽组件模板_基于 Vue 丝滑般拖拽排序组件VueSlicksort
今天给大家分享一个功能超强的自由拖拽排序组件VueSlicksort. vue-slicksort 一款功能强大的可拖拽的vue.js组件.拥有丝滑般拖拽动画效果,支持水平/垂直/网格拖拽排序.还可以 ...
confirm关闭 layer_基于 vue+layer.js 超青睐的弹窗组件VueLayer
今天给大家分享一个功能强健高水准的web弹窗组件VueLayer. vue-layer 一款备受web开发者青睐的layer.js弹窗组件的vue.js版本.拥有丰富友好的操作体验及文档,兼容主流浏览 ...
基于Vue的gannt（甘特图）组件
gannt组件演示 gitee 地址 https://gitee.com/TianhaoWang1996/gannt-self.git npm 安装 npm i gannt-self -S 引用 im ...

基于VUE的可隐藏的顶部菜单栏组件

基于VUE的可隐藏的顶部菜单栏组件相关推荐

最新文章

热门文章