Avada主题教程 2.1：超级菜单使用教程2.0版本

教程总目录：Avada主题详细教程：从0开始创建一个网站

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

之前的文章：Avada主题教程 2：创建带图文的超级菜单（导航菜单）

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

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

预览图

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

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

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

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

创建菜单

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

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

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

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

添加小工具

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

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

weifenlei-1

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

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

设置超级菜单

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

一级菜单设置

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

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

第一个二级菜单

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

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

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

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

添加高亮标签

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

第二和第三个 二级菜单

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

第四个二级菜单

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

设置全局页眉

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

主菜单设置

子菜单设置

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

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