vue实现导航栏下拉菜单_vue.js_

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

先看效果：

下拉菜单铺满全屏

...
...

.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;   } }

优点：

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

缺点：

1、使用了事件处理相对复杂

案例代码

方法二：hover

将下拉菜单需要下拉的导航栏下一级下，使用hover 控制元素，nav-item不要设置相对定位，以免定位时下拉菜单宽度不能100%铺满导航栏宽度。

将菜单初始高度设为0

优点：

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

缺点：

1、每个下拉菜单独立，也就是说切换导航栏，下拉菜单显示隐藏也会动画堆叠
2、每个导航标题都需要单独写下拉菜单，结构层次变多

案例代码

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

提示： 本文由神整理自网络，如有侵权请联系本站删除！
本站声明：
1、本站所有资源均来源于互联网，不保证100%完整、不提供任何技术支持；
2、本站所发布的文章以及附件仅限用于学习和研究目的;不得将用于商业或者非法用途；否则由此产生的法律后果，本站概不负责！