什么是 Mega Menu ?
简单来说,Mega Menu 就是那种大面积展开的下拉菜单,可以放很多栏目,甚至可以加图片、图标、按钮、产品等等。常见于一些大型商城、企业站,大多数 B2C 外贸独立站的主菜单就是这种形式。
很多人在搭建网站的时候,网站内容一多,导航菜单就变得杂乱无章,尤其是一些产品、页面较多的 C 端网站,这个时候就需要用到 Mega Menu(超级菜单)了。
今天这篇教程,Well 手把手教你如何在 Woodmart 主题里创建一个专业、美观的 Mega Menu。不用写代码,只需简单几步,就能做出高大上的导航效果!下图是一个简单的 Woodmart Mega Menu 效果展示 ↓

在图片中:上方区域是网站菜单区域,鼠标移入设置了超级菜单(WHY US)的菜单后,下方显示对应超级菜单内容。
创建 Mega Menu
打开你 WordPress 网站后台,进入 外观 – 菜单 – 展开需要设置超级菜单的菜单 ↓

在 Dropdown settings 里进行超级菜单配置:
Design:Full width,全宽度显示超级菜单
Dropdown height:留空
Dropdown padding:20px的内距
Enable scroll:No,下拉高度取决于内容高度
HTML Block for the dropdown:需要点击“Edit this block with page builder”创建超级菜单的内容,创建后就可以在这里选择
比如 Well 创建了一个名为 megamenu1 超级菜单内容 ↓

Load HTML dropdown with AJAX:Yes,会在首次加载超级菜单的时候ajax异步加载超级菜单的内容,防止和页面一起渲染,从而避免影响页面加载速度
Dropdown color scheme:黑白色调,按需选择
Open on mouse event:Hover,鼠标悬停展示超级菜单
设置好后保存菜单即可。
以上就是本篇 WoodMart 超级菜单教程的全部内容。
更多超级菜单教程请查看: