jQuery实现Max Mega Menu效果

原创文章
声明：作者声明此文章为原创，未经作者同意，请勿转载，若转载，务必注明本站出处，本平台保留追究侵权法律责任的权利。
全栈老韩
全栈工程师，擅长iOS App开发、前端（vue、react、nuxt、小程序&Taro）开发、Flutter、React Native、后端（midwayjs、golang、express、koa）开发、docker容器、seo优化等。

max mega menu是给WordPress提供的一个样式插件。主要效果是在鼠标hover在普通menu时，弹窗由不可见状态，透明度和y轴方向位移有一个transform动画。
官网：https://www.megamenu.com/
可以在官网上查看demo效果。
以下使用jQuery实现一个简易的max mega效果。

2 利用jQuery实现

2.1 css:声明max mega的弹窗normal和hover样式

language 复制代码 
// style.css 全局

.mega-menu {
  visibility: hidden;
  opacity: 0;
  transform: translate(0, 10px);
  transition: opacity 200ms ease-in, transform 200ms ease-in, visibility 200ms ease-in;
}

.mega-menu-hover {
  visibility: visible;
  opacity: 1;
  transform: translate(0, 0);
}

2.2 html:声明其中一个menu的弹窗样式

max mega menu示例.jpg

主要是先应用一个动画过渡时的css样式:

language 复制代码 
<div class="product-list mega-menu">

2.3 js:使用jQuery监听弹窗的父标签hover

language 复制代码 
// 监听“产品”的hover
  $('.product-nav').hover(
    function() {
      // 当鼠标进入元素时执行的函数
      // $('.product-list').show(); // 显示弹框
      $('.product-list').addClass('mega-menu-hover');
      $('.product-nav>a>img').attr('src', '/static/image/menu/menu_normal_arrow_up.png')
    },
    function() {
      // 当鼠标离开元素时执行的函数  
      // $('.product-list').hide(); // 隐藏弹框
      $('.product-list').removeClass('mega-menu-hover');
      $('.product-nav>a>img').attr('src', '/static/image/menu/menu_normal_arrow_down.png')
    }
  );

主要操作是在hover时添加mega-menu-hover样式，在hover结束时，移除mega-menu-hover样式。

发布于2024-04-23 07:37:12
浏览量117·

暂无评论，快来发表第一条评论吧