vue实现导航栏下拉菜单

本文实例为大家分享了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、每个导航标题都需要单独写下拉菜单，结构层次变多

案例代码

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