vue實現(xiàn)導航欄下拉菜單
更新時間：2022年09月01日 09:57:17 作者：凡小多
這篇文章主要為大家詳細介紹了vue實現(xiàn)導航欄下拉菜單，帶展開收縮動畫，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
本文實例為大家分享了vue實現(xiàn)導航欄下拉菜單的具體代碼，供大家參考，具體內(nèi)容如下
先看效果：
下拉菜單鋪滿全屏
<div class="nav">...</div> <div class="dropdown-content">...</div>
.nav {
?? ?position: relative;
}
.dropdown-content {
?? ?position: absolute;
?? ?width: 100%; ?// 拉滿
}下拉動畫
方法一：鼠標移入移出事件
使用的是vue的 transition組件以及鼠標事件@mouseenter 和 @mouseleave
.dropdown-enter-active {
? animation: expand-contract 1s ease;
}
.dropdown-leave-active {
? animation: expand-contract 1s ease reverse;
}
@keyframes expand-contract {
? 0% {
? ? overflow: hidden;
? ? opacity: 0;
? ? max-height: 0;
? }
? 100% {
? ? max-height: 300px; ?// 大于等于下拉菜單的高度
? ? opacity: 1;
? }
}優(yōu)點：
1、結(jié)構(gòu)層次清楚
2、多個導航需要下拉菜單，且結(jié)構(gòu)相似內(nèi)容不同，只需要重新渲染數(shù)據(jù)即可。
缺點：
1、使用了事件處理相對復雜
案例代碼
<template>
? <div class="app-container">
? ? <!-- 導航欄 -->
? ? <div class="nav" ref="navRef">
? ? ? <div class="nav-item" @mouseenter="isShow = false">導航欄1</div>
? ? ? <div class="nav-item" @mouseenter="showDropDown('2')">導航欄2</div>
? ? ? <div class="nav-item" @mouseenter="showDropDown('3')">導航欄3</div>
? ? ? <div class="nav-item" @mouseenter="isShow = false">導航欄4</div>
? ? ? <div class="nav-item" @mouseenter="isShow = false">導航欄5</div>
? ? </div>
? ? <!-- 下拉菜單 -->
? ? <transition name="dropdown">
? ? ? <div v-show="isShow" class="dropdown-content" @mouseleave="hideDropDown">
? ? ? ? <div class="dropdown-menu">
? ? ? ? ? <div class="menuItem" v-for="(item, index) in analog" :key="index">
? ? ? ? ? ? {{ item }}
? ? ? ? ? </div>
? ? ? ? </div>
? ? ? </div>
? ? </transition>
? </div>
</template>
<script>
export default {
? data() {
? ? return {
? ? ? isShow: false,
? ? ? navTop: 0,
? ? ? // 模擬下拉菜單內(nèi)容
? ? ? analog: [],
? ? };
? },
? mounted() {
? ? // 導航欄距頁面高度 = 元素頂部距頁面距離 + 元素本身高度
? ? this.navTop =
? ? ? this.$refs.navRef.getBoundingClientRect().top +
? ? ? this.$refs.navRef.offsetHeight;
? },
? methods: {
? ? showDropDown(val) {
? ? ? if (!this.isShow) this.isShow = true;
? ? ? if (val === "2") {
? ? ? ? this.analog = ["菜單1", "菜單1", "菜單1", "菜單1", "菜單1"];
? ? ? } else {
? ? ? ? this.analog = ["菜單22", "菜單22", "菜單22", "菜單22", "菜單22"];
? ? ? }
? ? },
? ? hideDropDown(e) {
? ? ? // e.pageY：鼠標指針相對頁面的偏移量
? ? ? if (this.isShow && e.pageY >= this.navTop) this.isShow = false;
? ? },
? },
};
</script>
<style lang="scss" scoped>
// 下拉菜單收縮展開
@keyframes expand-contract {
? 0% {
? ? opacity: 0;
? ? height: 0;
? ? // max-height: 0;
? }
? 100% {
? ? opacity: 1;
? ? height: 300px;
? ? // max-height: 300px; ?// 大于等于下拉菜單的高度
? }
}
.dropdown-enter-active {
? animation: expand-contract 0.6s;
}
.dropdown-leave-active {
? animation: expand-contract 0.6s reverse;
}
// 內(nèi)容變化
@keyframes menu {
? 0% {
? ? opacity: 0;
? }
? 100% {
? ? opacity: 1;
? }
}
// 導航欄
.nav {
? position: relative;
? display: flex;
? width: 100%;
? height: 80px;
? line-height: 80px;
? background-color: #eee;
? border-bottom: 1px solid #ccc;
? .nav-item {
? ? position: relative;
? ? margin: 0 20px;
? ? cursor: pointer;
? ? transition: all 0.3s linear;
? ? &::before {
? ? ? content: "";
? ? ? position: absolute;
? ? ? bottom: 0;
? ? ? left: 0;
? ? ? height: 2px;
? ? ? width: 100%;
? ? ? background-color: #1678e9;
? ? ? transform: scale(0);
? ? ? transition: all 0.4s linear;
? ? }
? ? &:hover {
? ? ? color: #1678e9;
? ? ? &::before {
? ? ? ? transform: scale(1);
? ? ? }
? ? }
? }
}
.dropdown-content {
? position: absolute;
? width: 100%; // 拉滿
? overflow: hidden;
? .dropdown-menu {
? ? padding: 10px 8px 15px;
? ? color: white;
? ? background-color: rgba($color: #ccc, $alpha: 0.5);
? ? border-radius: 4px;
? ? /* animation: menu 0.6s; */
? ? .menuItem {
? ? ? width: 100%;
? ? ? white-space: nowrap;
? ? ? padding: 10px 16px;
? ? ? font-size: 16px;
? ? ? color: #000;
? ? ? cursor: pointer;
? ? ? transition: all 0.3s;
? ? ? border-radius: 4px;
? ? ? &:hover {
? ? ? ? background-color: #ccc;
? ? ? }
? ? }
? }
}
</style>方法二：hover
將下拉菜單需要下拉的導航欄下一級下，使用hover 控制元素，nav-item不要設置相對定位，以免定位時下拉菜單寬度不能100%鋪滿導航欄寬度。
將菜單初始高度設為0
優(yōu)點：
1、簡單明了，不需要事件，js等操作
缺點：
1、每個下拉菜單獨立，也就是說切換導航欄，下拉菜單顯示隱藏也會動畫堆疊
2、每個導航標題都需要單獨寫下拉菜單，結(jié)構(gòu)層次變多
案例代碼
<template>
? <div class="app-container">
? ? <!-- 導航欄 -->
? ? <div class="nav">
? ? ? <div class="nav-item"><span class="nav-item-title">導航欄1</span></div>
? ? ? <div class="nav-item">
? ? ? ? <span class="nav-item-title">導航欄2</span>
? ? ? ? <!-- 下拉菜單 -->
? ? ? ? <div class="dropdown-content">
? ? ? ? ? <div class="dropdown-menu">
? ? ? ? ? ? <div class="menuItem">菜單1</div>
? ? ? ? ? ? <div class="menuItem">菜單菜單1</div>
? ? ? ? ? ? <div class="menuItem">菜單2</div>
? ? ? ? ? ? <div class="menuItem">菜單菜單菜單1</div>
? ? ? ? ? ? <div class="menuItem">菜單3</div>
? ? ? ? ? </div>
? ? ? ? </div>
? ? ? </div>
? ? ? <div class="nav-item"><span class="nav-item-title">導航欄3</span></div>
? ? ? <div class="nav-item">
? ? ? ? <span class="nav-item-title">導航欄4</span>
? ? ? ? <!-- 下拉菜單 -->
? ? ? ? <div class="dropdown-content">
? ? ? ? ? <div class="dropdown-menu">
? ? ? ? ? ? <div class="menuItem">菜單1</div>
? ? ? ? ? ? <div class="menuItem">菜單菜單1</div>
? ? ? ? ? ? <div class="menuItem">菜單2</div>
? ? ? ? ? ? <div class="menuItem">菜單菜單菜單1</div>
? ? ? ? ? ? <div class="menuItem">菜單3</div>
? ? ? ? ? </div>
? ? ? ? </div>
? ? ? </div>
? ? ? <div class="nav-item"><span class="nav-item-title">導航欄5</span></div>
? ? </div>
? </div>
</template>
<script>
export default {
? data() {
? ? return {
? ? ? isShow: false,
? ? };
? },
? mounted() {},
? methods: {},
};
</script>
<style lang="scss" scoped>
.nav {
? position: relative;
? display: flex;
? width: 100%;
? height: 80px;
? line-height: 80px;
? background-color: #eee;
? border-bottom: 1px solid #ccc;
? .nav-item {
? ? // position: relative;
? ? margin: 0 20px;
? ? cursor: pointer;
? ? transition: all 0.3s linear;
? ? .nav-item-title {
? ? ? position: relative;
? ? ? display: block;
? ? ? height: inherit;
? ? ? width: inherit;
? ? ? &::before {
? ? ? ? content: "";
? ? ? ? position: absolute;
? ? ? ? bottom: 0;
? ? ? ? left: 0;
? ? ? ? height: 2px;
? ? ? ? width: 100%;
? ? ? ? background-color: #1678e9;
? ? ? ? transform: scale(0);
? ? ? ? transition: all 0.4s linear;
? ? ? }
? ? ? &:hover {
? ? ? ? color: #1678e9;
? ? ? ? &::before {
? ? ? ? ? transform: scale(1);
? ? ? ? }
? ? ? }
? ? }
? ? &:hover .dropdown-content {
? ? ? height: 300px;
? ? }
? }
? // 下拉菜單
? .dropdown-content {
? ? position: absolute;
? ? top: 80px; // 為導航欄高度
? ? left: 0; // 設置為0, 不然會直接定位到父元素下方
? ? width: 100%;
? ? height: 0; // 下拉初始高度
? ? overflow: hidden;
? ? transition: 0.6s;
? ? .dropdown-menu {
? ? ? padding: 10px 8px 15px;
? ? ? color: white;
? ? ? background-color: rgba($color: #ccc, $alpha: 0.5);
? ? ? border-radius: 4px;
? ? ? .menuItem {
? ? ? ? width: 100%;
? ? ? ? height: 42px;
? ? ? ? white-space: nowrap;
? ? ? ? padding: 0 16px;
? ? ? ? font-size: 16px;
? ? ? ? line-height: 42px;
? ? ? ? color: #000;
? ? ? ? cursor: pointer;
? ? ? ? transition: all 0.3s ease-in-out;
? ? ? ? border-radius: 4px;
? ? ? ? &:hover {
? ? ? ? ? background-color: #ccc;
? ? ? ? }
? ? ? }
? ? }
? }
}
</style>以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
因為新公司使用react技術棧，包括Umi、Dva、Ant-design等一系列解決方案。本文就簡單的介紹一下vue轉(zhuǎn)react入門指南，感興趣的可以了解一下2021-10-10
這篇文章主要介紹了Vue項目打包到服務器后請求接口報錯404的解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-05-05
web面試MVC與MVVM區(qū)別及Vue為什么不完全遵守MVVM解答
這篇文章主要介紹了web面試中常問問題，MVC與MVVM區(qū)別以及Vue為什么不完全遵守MVVM的難點解答，有需要的朋友可以借鑒參考下，希望能夠有所幫助2021-09-09
這篇文章主要介紹了el-select 下拉框全選、多選的幾種方式組件示例詳解,本文通過示例代碼給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友參考下吧2023-12-12
解決vue單頁路由跳轉(zhuǎn)后scrollTop的問題
今天小編就為大家分享一篇解決vue單頁路由跳轉(zhuǎn)后scrollTop的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
這篇文章主要介紹了vue3+ts使用bus事件總線,文中給大家提到了vue總線機制(bus)的相關知識，本文給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2022-08-08
vue嵌套路由與404重定向?qū)崿F(xiàn)方法分析
這篇文章主要介紹了vue嵌套路由與404重定向?qū)崿F(xiàn)方法,結(jié)合實例形式分析了vue.js嵌套路由與404重定向的概念、原理、實現(xiàn)步驟與相關操作技巧,需要的朋友可以參考下2018-05-05
vue中echarts的用法及與elementui-select的協(xié)同綁定操作
這篇文章主要介紹了vue中echarts的用法及與elementui-select的協(xié)同綁定操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-11-11
這篇文章主要為大家介紹了Vue中的數(shù)據(jù)驅(qū)動解釋，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-12-12
這篇文章主要為大家詳細介紹了vue實現(xiàn)瀑布流組件滑動加載更多，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-03-03