vue导航栏悬浮菜单

html部分

<template><div><div class="container demoHome d-flex a-center j-sb"><div class="logo"><img class="obj-auto" src="../assets/1.png" alt="" /></div><div class="flex-1 d-flex top_center"><divclass="ml-6 pointer":class="{ menuActive: menuIndex == index }"v-for="(item, index) in menuList":key="index"@click="changeMenu(index)"><span @mousemove="changeIndex(index)">{{ item }}</span></div></div><div class="userBox">立即登录</div></div><transition name="menuSlide"><divclass="container menu_xun"v-show="menuIndex === 1"@mouseleave="menuIndex = '-1'"><div class="menu_kuang"><divclass="menu_iten ml-3 mt-3"v-for="(item, index) in 8":key="index">车辆{{ index }}</div></div></div></transition><transition name="menuSlide"><divclass="container menu_xun"v-show="menuIndex === 2"@mouseleave="menuIndex = '-1'"><div class="menu_kuang"><divclass="menu_iten ml-3 mt-3"v-for="(item, index) in 8":key="index">购车{{ index }}</div></div></div></transition><transition name="menuSlide"><divclass="container menu_xun"v-show="menuIndex === 4"@mouseleave="menuIndex = '-1'"><div class="menu_kuang"><divclass="menu_iten ml-3 mt-3"v-for="(item, index) in 8":key="index">客户{{ index }}</div></div></div></transition><transition name="menuSlide"><divclass="container menu_xun"v-show="menuIndex === 5"@mouseleave="menuIndex = '-1'"><div class="menu_kuang"><divclass="menu_iten ml-3 mt-3"v-for="(item, index) in 8":key="index">企业{{ index }}</div></div></div></transition><div class="container d-flex"><div class="img_item" v-for="(item, index) in 5" :key="index"></div></div></div>
</template>

js部分

<script>
export default {name: "",props: {},data() {return {menuIndex: 0,menuList: ["首页","车型","助手","商城","服务","企业天地","招募",],};},created() {},mounted() {},methods: {changeMenu(i) {this.menuIndex = i;},changeIndex(i) {this.menuIndex = i;},leave() {this.menuIndex = -1;},},
};
</script>

css部分

<style scoped>
.demoHome {height: 10rem;
}
.logo {width: 32rem;height: 6rem;
}
.top_center {height: 10rem;line-height: 10rem;font-size: 20px;
}.userBox {width: 10rem;
}
.menuActive {color: #435c9e;border-bottom: 0.3rem solid #435c9e;
}
.menu_xun {position: fixed;left: 50%;transform: translateX(-50%);overflow: hidden;background-color: #fff;
}
.menu_kuang {width: 100%;display: flex;flex-direction: row !important;flex-wrap: wrap;
}
.menuSlide-leave-active,
.menuSlide-enter-active {transition: max-height 1s;
}
.menuSlide-enter,
.menuSlide-leave-to {max-height: 0;
}
.menuSlide-enter-to,
.menuSlide-leave {max-height: 500px;
}
.menu_iten {width: 23%;height: 220px;border: 1px solid #435c9e;
}
.img_item {width: 320px;height: 650px;background-image: url("../assets/g1.png");background-size: cover;background-position: center;
}
.imgBox {height: 430px;background-color: royalblue;
}
.title {height: 220px;background-color: pink;
}
.img_item:hover {animation: ani 1s;animation-fill-mode: forwards;
}@keyframes ani {0% {background-size: 320px 650px;}50% {background-size: 350px 750px;}100% {background-size: 320px 650px;}
}
</style>

vue导航栏悬浮菜单相关推荐

后台管理页面通过点击左侧导航栏的菜单项实现右边内容的改变
目录前端页面部分 js代码部分左侧导航栏组菜单项的打开与关闭 url地址跳转地址栏url地址处理 ajax实现右边页面内容变换内容面板上Bootstrap 面包屑导航前端页面部分 <a ...
写了个移动端可滑动（惯性滑动回弹）Vue导航栏组件 ly-tab
前段时间写了一个移动端的自适应滑动Vue导航栏组件,觉得有一定实用性,大家可能会用得到(当然有些大佬自己写得更好的话就没必要啦),于是前两天整理了一下,目前已经发布到npm和GitHub上了,点我到n ...
Axure RP9——【导航栏二级菜单的展开效果】
导航栏二级菜单的展开效果 Navigation Bar · secondary menu Here's how I want things to unfold. 目录导航栏二级菜单的展开效果 Nav ...
仿小米导航栏；导航栏悬浮滚动更改背景色javascript实现；
一.实现效果小米字体没引用,导航栏文字随便调的,仅供参考二.代码 1.html <!DOCTYPE html> <html lang="en">< ...
vue 导航栏刷新页面定位:
不想分析可以直接看解决方案问题描述: 通过router的route-link可以实现导航栏的功能,并且可以跳转到相应页面但是刷新页面导航栏没有定位到当前页面一栏. 问题分析: 定位导航栏步骤 1. ...
vue导航栏滑动切换居中，导航栏超出部分可以滑动，点击触发滑动对应的index，且滑动时导航栏会自动对应
效果图模仿婚礼纪电子请帖模块导航栏超出部分可以滑动,点击触发滑动对应的index,且滑动时导航栏会自动对应 Html部分 <template><div class=" ...
Vue导航栏吸顶及滚动渐变色
@阿乐今天敲代码没效果图好几天没更新了,做一个小demo吧.导航栏吸顶,以及随页面滚动实现渐变色吸顶前: 吸顶后: 滚动渐变色: 一.实现 html: <div class="n ...
HTML+CSS项目实践九——设置网站导航栏悬浮在网页最上面
知识点:CSS 定位属性.z-index属性实现效果: 导航条叠加在另外一个div上面(导航栏下面有背景图.背景视频等) 导航条一直在浏览器窗口顶部(也就是拖动浏览器窗口的滚动条时,导航栏依然保持位 ...
简单实现CSS导航栏二级菜单从上往下平滑滑下弹出效果
页面样式如下: html: <li><div class="nav-tab">技术分析</div><ul class="nav- ...

vue导航栏悬浮菜单

vue导航栏悬浮菜单相关推荐

最新文章

热门文章