vue实现导航栏下拉菜单

第vue实现导航栏下拉菜单本文实例为大家分享了vue实现导航栏下拉菜单的具体代码，供大家参考，具体内容如下

先看效果：

下拉菜单铺满全屏

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;

}

优点：

1、结构层次清楚

2、多个导航需要下拉菜单，且结构相似内容不同，只需要重新渲染数据即可。

缺点：

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,

//模拟下拉菜单内容

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;

//内容变化

@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

优点：

1、简单明了，不需要事件，js等操作

缺点：

1、每个下拉菜单独立，也就是说切换导航栏，下拉菜单显示隐藏也会动画堆叠

2、每个导航标题都需要单独写下拉菜单，结构层次变多

案例代码

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;