[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"$f4x7Nfm9HATVq-aOGrymDMLz3kJWCDgqMDiDyCeGYYOQ":3},{"code":4,"message":5,"data":6},200,"成功",{"id":7,"createdAt":8,"title":9,"content":10,"summary":11,"image":12,"uid":13,"user":14,"categoryId":21,"category":22,"subCategoryId":24,"subCategory":25,"comments":27,"status":17,"reason":28,"notice":28,"visitCount":29,"commentCount":30,"keywords":31},109,"2024-04-23T07:37:12.745Z","jQuery实现Max Mega Menu效果","\n## 实现一个Max Mega Menu的css效果\n### 1. Max Mega Menu样式说明\nmax mega menu是给WordPress提供的一个样式插件。主要效果是在鼠标hover在普通menu时，弹窗由不可见状态，透明度和y轴方向位移有一个transform动画。\n官网：[https://www.megamenu.com/](https://www.megamenu.com/)\n可以在官网上查看demo效果。\n以下使用jQuery实现一个简易的max mega效果。\n\n### 2 利用jQuery实现\n#### 2.1 css:声明max mega的弹窗normal和hover样式\n```language\n// style.css 全局\n\n.mega-menu {\n  visibility: hidden;\n  opacity: 0;\n  transform: translate(0, 10px);\n  transition: opacity 200ms ease-in, transform 200ms ease-in, visibility 200ms ease-in;\n}\n\n.mega-menu-hover {\n  visibility: visible;\n  opacity: 1;\n  transform: translate(0, 0);\n}\n```\n\n\n#### 2.2 html:声明其中一个menu的弹窗样式\n![max mega menu示例.jpg](https://image.xinwei.ltd/91713857714684.jpg)\n\n主要是先应用一个动画过渡时的css样式:\n```language\n\u003Cdiv class=\"product-list mega-menu\">\n```\n\n\n#### 2.3 js:使用jQuery监听弹窗的父标签hover\n```language\n// 监听“产品”的hover\n  $('.product-nav').hover(\n    function() {\n      // 当鼠标进入元素时执行的函数\n      // $('.product-list').show(); // 显示弹框\n      $('.product-list').addClass('mega-menu-hover');\n      $('.product-nav>a>img').attr('src', '/static/image/menu/menu_normal_arrow_up.png')\n    },\n    function() {\n      // 当鼠标离开元素时执行的函数  \n      // $('.product-list').hide(); // 隐藏弹框\n      $('.product-list').removeClass('mega-menu-hover');\n      $('.product-nav>a>img').attr('src', '/static/image/menu/menu_normal_arrow_down.png')\n    }\n  );\n```\n\n主要操作是在hover时添加`mega-menu-hover`样式，在hover结束时，移除`mega-menu-hover`样式。\n\n\n\n\n\n\n\n\n\n\n","Max Mega Menu是wordpress配套的menu动效插件，在wordpress上使用这个插件是十分常见的，这里使用jQuery和css来实现这个效果。","https://image.xinwei.ltd/91713857714684.jpg",499668042977349,{"phone":15,"userId":13,"nickName":16,"vipType":17,"avatar":18,"sign":19,"createdAt":20},"13121171998","全栈老韩",1,"https://image.xinwei.ltd/images/IMG_5430.JPG","全栈工程师，擅长iOS App开发、前端（vue、react、nuxt、小程序&Taro）开发、Flutter、React Native、后端（midwayjs、golang、express、koa）开发、docker容器、seo优化等。","2024-01-01T16:14:30.305Z",2,{"id":21,"name":23},"IT技术",32,{"id":24,"name":26,"parentId":21},"前端",[],"",122,0,"jquery,max mega,wordpress max mega,wordpress animation,wordpress开发,wordpress网站"]