vue實現(xiàn)導航欄下拉菜單

第vue實現(xiàn)導航欄下拉菜單本文實例為大家分享了vue實現(xiàn)導航欄下拉菜單的具體代碼，供大家參考，具體內(nèi)容如下

先看效果：

下拉菜單鋪滿全屏

div.../div

div.../div

.nav{

position:relative;

.dropdown-content{

position:absolute;

width:100%;

//拉滿

}

方法一：鼠標移入移出事件

使用的是vue的transition組件以及鼠標事件@mouseenter和@mouseleave

.dropdown-enter-active{

animation:expand-contract1sease;

.dropdown-leave-active{

animation:expand-contract1seasereverse;

@keyframesexpand-contract{

0%{

overflow:hidden;

opacity:0;

max-height:0;

100%{

max-height:300px;

//大于等于下拉菜單的高度

opacity:1;

}

優(yōu)點：

1、結(jié)構層次清楚

2、多個導航需要下拉菜單，且結(jié)構相似內(nèi)容不同，只需要重新渲染數(shù)據(jù)即可。

缺點：

1、使用了事件處理相對復雜

案例代碼

template

div

!--導航欄--

divref="navRef"

div@mouseenter="isShow=false"導航欄1/div

div@mouseenter="showDropDown('2')"導航欄2/div

div@mouseenter="showDropDown('3')"導航欄3/div

div@mouseenter="isShow=false"導航欄4/div

div@mouseenter="isShow=false"導航欄5/div

/div

!--下拉菜單--

transitionname="dropdown"

divv-show="isShow"@mouseleave="hideDropDown"

div

divv-for="(item,index)inanalog":key="index"

{{item}}

/div

/div

/div

/transition

/div

/template

script

exportdefault{

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.isShowe.pageY=this.navTop)this.isShow=false;

},

/script

stylelang="scss"scoped

//下拉菜單收縮展開

@keyframesexpand-contract{

0%{

opacity:0;

height:0;

//max-height:0;

100%{

opacity:1;

height:300px;

//max-height:300px;

//大于等于下拉菜單的高度

.dropdown-enter-active{

animation:expand-contract0.6s;

.dropdown-leave-active{

animation:expand-contract0.6sreverse;

//內(nèi)容變化

@keyframesmenu{

0%{

opacity:0;

100%{

opacity:1;

//導航欄

.nav{

position:relative;

display:flex;

width:100%;

height:80px;

line-height:80px;

background-color:#eee;

border-bottom:1pxsolid#ccc;

.nav-item{

position:relative;

margin:020px;

cursor:pointer;

transition:all0.3slinear;

::before{

content:"";

position:absolute;

bottom:0;

left:0;

height:2px;

width:100%;

background-color:#1678e9;

transform:scale(0);

transition:all0.4slinear;

}

:hover{

color:#1678e9;

::before{

transform:scale(1);

}

}

.dropdown-content{

position:absolute;

width:100%;//拉滿

overflow:hidden;

.dropdown-menu{

padding:10px8px15px;

color:white;

background-color:rgba($color:#ccc,$alpha:0.5);

border-radius:4px;

/*animation:menu0.6s;*/

.menuItem{

width:100%;

white-space:nowrap;

padding:10px16px;

font-size:16px;

color:#000;

cursor:pointer;

transition:all0.3s;

border-radius:4px;

:hover{

background-color:#ccc;

}

}

/style

方法二：hover

將下拉菜單需要下拉的導航欄下一級下，使用hover控制元素，nav-item不要設置相對定位，以免定位時下拉菜單寬度不能100%鋪滿導航欄寬度。

將菜單初始高度設為0

優(yōu)點：

1、簡單明了，不需要事件，js等操作

缺點：

1、每個下拉菜單獨立，也就是說切換導航欄，下拉菜單顯示隱藏也會動畫堆疊

2、每個導航標題都需要單獨寫下拉菜單，結(jié)構層次變多

案例代碼

template

div

!--導航欄--

div

divspan導航欄1/span/div

div

span導航欄2/span

!--下拉菜單--

div

div

div菜單1/div

div菜單菜單1/div

div菜單2/div

div菜單菜單菜單1/div

div菜單3/div

/div

/div

/div

divspan導航欄3/span/div

div

span導航欄4/span

!--下拉菜單--

div

div

div菜單1/div

div菜單菜單1/div

div菜單2/div

div菜單菜單菜單1/div

div菜單3/div

/div

/div

/div

divspan導航欄5/span/div

/div

/div

/template

script

exportdefault{

data(){

return{

isShow:false,

};

mounted(){},

methods:{},

/script

stylelang="scss"scoped

.nav{

position:relative;

display:flex;

width:100%;

height:80px;

line-height:80px;

background-color:#eee;

border-bottom:1pxsolid#ccc;

.nav-item{

//position:relative;

margin:020px;

cursor:pointer;

transition:all0.3slinear;

.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:all0.4slinear;

}

: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;