如何给 WooCommerce 主题添加一个类似天猫、京东商城的垂直菜单?

如何给 WooCommerce 主题添加一个类似天猫、京东商城的垂直菜单?

从第一版的薇晓朵数字商城设计开始,我们就考虑过采用类似天猫和京东的那种大菜单风格,但测试了一段时间发现对于我们这种虚拟类产品市场并不合适,主要是因为产品的类目并不是太多,完全没必要。

昨天又被客服问到说有客户想要定制主题实现这种垂直菜单效果,需要怎么操作,既然现在有人需要那么以后肯定也是。这里给下解决方案:

首先还是提供免费的方案,如果不是特别需要和主题集成的话,那么我们建议采用 WordPress 插件来实现比较好。

如果是要求特别高,要全新做主题的话,那么网上找下这类菜单的 JQuery 代码集成会好些,直接搜索天猫菜单源码即可。


JQuery 垂直巨型菜单小工具(免费)

直接创建一个小工具,它允许您使用 jQuery 从任何标准 WordPress 自定义菜单添加弹出式垂直大型菜单。可以在每个页面上处理多个垂直的大型菜单,并提供 3 个动画效果 – 显示/隐藏,淡入或滑出。

小工具还可以根据您所在的位置选择向左或向右选择弹出菜单。为获得最佳效果,请使用 3 级菜单进行自定义设置。

下载地址:

JQuery Vertical Mega Menu Widget

不过这款插件已经超过 2 年以上没有更新。请谨慎使用。


SM Vertical Menu 垂直菜单(免费)

描述,WordPress 小工具菜单,用于在您的站点侧栏显示垂直菜单。特征是将垂直菜单添加到您的小工具区域。

SM Vertical Menu 也是通过小工具实现,不过需要您进行调整菜单显示的位置,相对来说并不是很灵活,但已经可以满足要求了。

下载地址:

SM Vertical Menu

对于会 CSS 的朋友可以自己调整样式,非常简单。


UberMenu 超级大菜单(付费)

如果您不想要再过多的调整主题代码,那么这款插件就完全足够了,直接安装好后在您需要的位置添加简码或者集成上去就可以。

UberMenu 是一款用户友好,高度自定义,自适性的 Mega 菜单 WordPress 插件。采用 WordPress 自带菜单系统,使用简单且功能强大。

使用 UberMenu 中文版您可以定义各种类型的菜单。当然也包括本文中提到的垂直菜单样式如下:

效果演示:https://wpmegamenu.com/vertical-mega-menu/

此插件我们从 2016 年就已经购入并制作了 UberMenu 中文版,薇晓朵数字商城也已经上架销售。

首页

对于如何选择就完全取决于您的项目要求了,UberMenu 会比较灵活,因为可以使用简码进行调用菜单显示的位置,如果是有特殊要求的话还可以在后台的设置面板中调整具体选项。

文章没看懂?代码不会用?需要帮助您可以去论坛提问自助服务台