进入WordPress后台>插件>安装插件,搜索MaxMegaMenu,安装并启用。
国内网站如果不能正常安装,就去WordPress官网搜索下载,手动ftp上传。
为了方便讲解,老魏在网站中添加一些产品,形成三级产品分类,这样看着更清晰一些。
如下图所示,在WordPress后台>外观>菜单,看到MaxMegaMenu插件的设置栏,以及事先划分好的三级产品菜单。
这是默认未开启插件时,菜单的样子。
启用MaxMegaMenu的菜单设置。
生效后打开是下图的效果,弹出二级、三级菜单的效果、速度和你设置的一样。
在products这个一级菜单上点击megamenu小齿轮菜单,进入设置。
子菜单显示模式:megamenu-标准布局,也有网格布局。根据个人喜好选择。
系统会自动保存。
点击子菜单右侧的小箭头,可以让整体间距更大,子菜单更宽一些。
点击小箭头后会增加当前小工具的列数,让间距更大。同理点击向左的小工具减少列数。
以下是子菜单默认间距和扩大间距的对比图。
首先在任何一个一级菜单上点击megamenu的小齿轮图标,比如home。
子菜单显示模式:megamenu-标准布局。
从右侧“选择添加到面板的小工具”,分别拖拽图片小工具、文本小工具。
图片小工具上传一个小尺寸的清晰图片,比如外贸独立站就选择产品图片,标题写上产品名。
与上面第四条的子菜单列数调整方法一样,点击向左或向右的小箭头调整图片及文字的宽度。
此时前台页面的home菜单下看到图片+文字形式的mega菜单。
表现形式比单纯的文字菜单漂亮很多,特别是外贸产品站很适合用这种mega菜单。
如果你愿意可以把search添加到菜单中来。
先手动添加一个自定义链接,url是你网站搜索地址,导航标签写search,添加到菜单中。
在search菜单上点击megamenu小齿轮,出现如下图所示的设置项。
子菜单显示形式:megamenu标准布局,右侧选择搜索,一栏。
图标中选择一个合适的。
最后前台看到的搜索菜单如下图:
也可以隐藏搜索的文字,只留下图标。
在设置中勾选hidetext、hidearrow、disablelink,menuitemalign选择右,点击保存。
如下图所示。
前台看到搜索的表现形式如下图:
外贸站一般会有facebook、twitter菜单做一个链接形式指向社交媒体。
和上面第六点一样,添加自定义链接,打开megamenu小齿轮的设置中,勾选hidetext、menuitemalign选择右。
图标中选择合适的的图标。
效果如下图所示:
8、菜单设置
在WordPress后台的megamenu>菜单主题中,可以设置菜单栏的尺寸、颜色、对齐方式、字体、背景、边框等。