• 欢迎来到主题派官网,主题源码,插件,模板下载。所有主题及插件资源不负责技术支持,售出不退!
主题派主题派  2023-06-16 14:12 主题派 隐藏边栏 |   抢沙发  9 
文章评分 0 次,平均分 0.0

 

今天又研究了下超级菜单,搞了个比之前教程复杂一点的排版。成品出来后感觉还可以,所以跟大家分享下。

之前和现在 2 篇文章看完,你应该能够自己将想象中的超级菜单做出来一个大概。

欢迎进 Q 群大家一起讨论。

预览图

预览站点:https://avada.diqizhang.com/

因为每个人审美都不一样,这个菜单样式可能有人也不喜欢。不过毕竟只是个网站顶部简单导航,搞得过于复杂了可能会起到反效果。

这个排版的超级菜单操作思路和之前都是一样的。

这个是 4 列排版。第一列是二级菜单+3 级菜单,第二列和第三列都是图片加文字,第四列就是简单的一个图片。

创建菜单

下面是菜单的截图,大家作为参考。

从图中可以看出,我的二级菜单是四个 新课程、成华大道、二仙桥、腰马合一。

其中“新课程”下面有 4 个三级菜单。他们组合后成了下图样式。

你在跟着本教程文章学习时,可以先按照结构创建出来这几个菜单。然后一步一步分别进行设置。

添加小工具

超级菜单调用的是小工具里的内容。所以我们创建几个小工具来备用。

上图我搞得 3 个小工具跟这个超级菜单对应。

weifenlei-1

里面就是随便打的一些字,在超级菜单下面区域显示。

weifenlei-2 和 weifenlei-3 实际一样,都是图文。在超级菜单下面区域显示。

设置超级菜单

前面我们创建了菜单基本结构和小工具,下面我们说下超级菜单的详细设置。

一级菜单我们添加了一个高亮标签“hot”你不加或者 hot 改成其他的都可以。

超级菜单开启最大宽度,列数自动。

第一个二级菜单比较简单。

我们给他添加了一个图标。同样也添加了一个高亮标签。

然后这个二级菜单我们打开超级菜单选项。并将超级菜单区域选中小工具 weifenlei-1

在这个二级菜单下我们又加了几个三级菜单。这几个三级菜单因为设置项一样。只需要添加一个小图标美化下即可。

添加高亮标签

这个高亮标签只有第一个三级菜单有,另外三个不需要设置。

这两个菜单设置项相同,都直接选择显示的小工具即可。

第四个二级菜单只需要添加一个背景图像即可。

设置全局页眉

超级菜单我们设置完毕了。但是排版整体还有一些问题,我们需要在全局布局中做一下其他设置。

需要注意下,我设置了子菜单背景颜色是 2 号灰白色。建议是和网站整体背景颜色不同。这样超级菜单展开后视觉上会有区分区域。

到这里整个超级菜单的设置就完成了。我们在操作过程中可以每设置一些选项就更新一下,看看实际效果。

「点点赞赏,手留余香」

还没有人赞赏,快来当第一个赞赏的人吧!

主题派给主题派打赏
×
予人玫瑰,手有余香
  • 2
  • 5
  • 10
  • 20
  • 50
2
支付
Avada 主题教程 2.1:超级菜单使用教程 2.0 版本 为主题派网版权所有,转载请注明出处,所有资源不提供技术支持。
主题派
主题派 关注:0    粉丝:0
Wordpress主题,插件,源码商城

发表评论

表情 格式 链接 私密 签到 常用语
扫一扫二维码分享
×
所有资源不提供技术支持,自行测试,售后不退。
艾瑞克网