Avada超级菜单制作图文导航

在Avada主题的演示站中,我们会看到有些demo中的菜单做的很漂亮,下拉菜单中可以包含图片、文字描述等元素,非常的直观,相信许多朋友都想把自己的Avada制作成这样强大的菜单,其实这些都是依赖于Avada的MegaMenu超级菜单和自定义小工具来完成,下面就来看下Avada主题如何制作图文式导航。

Avada演示站超级菜单图文导航

在开始之前,先看一下超级菜单的效果是如何的,上图是Avada University 演示站的菜单,当把鼠标悬浮到指定导航后,会出现一个很宽的二级菜单,包括图片、文字、链接等多种元素,这样的导航,可以让人快速找到自己需要的东西,不必再一个个寻找

avada菜单结构

比如这里我们有一个三级菜单,默认情况下是只能显示一个二级菜单下面的分类

avada菜单默认样式

当一级菜单开启超级菜单选项后,整个二级菜单的布局发生改变,而且只要可以同时展示所有的三级菜单,不用再一个个翻看

avada开启超级菜单后的样式

 

Avada开启超级菜单方法

其实这样操作很简单,因为avada默认已经允许使用超级菜单(Mega Menu),我们就只需要在指定的菜单中开启即可

在外观 – 菜单中,选择自己需要设计的一级菜单,会看到有一个 Avada Menu Options选项

avada如何开启超级菜单

在选项的最底部,有一个叫做Fusion Mega Menu的选项,默认是Off,我们将其设为On,即开启这个的超级菜单

开启之后会多出许多选项,如果默认的话就是刚刚图中的效果

 

设计美化超级菜单

现在虽然说已经开启了超级菜单,但是离我们想要的图文导航的效果还差了很多,所以需要进一步设置

 

设置超级菜单的列数

比如第一个演示中的菜单,他是很宽的,和整个导航菜单的宽度是一样,所以我们要设置超级菜单为全宽

再次回到刚刚开启超级菜单的选项那里,这时候下面会多出很多选项,其中很重要的就是下面的2个,是否设置超级菜单全宽,以及超级菜单的列数,一般情况下按照下图设置即可

avada设置超级菜单样式

可以看到宽度已经调整,而且它会根据子菜单的数量,每个子菜单(二级菜单)会占用1列,如果超出一行则在下一行展示,自动调节列数,最多可以设置为6列

avada全宽超级菜单

 

列设置

现在我们已经有了想要的布局效果,接下来就是往菜单中填充内容了

因为有3个列,我们需要单独对每列进行个性化的设置,比如想要设置第一列的样式,那么就打开二级菜单中的搜索引擎,选择 Avada Menu Options

这里可以进行很多的装饰设计等,比如添加Icon、标签、缩略图等,这些都是默认自带的样式,只需要自己进行一些设置即可

avada设置菜单高级样式

 

利用小工具添加自定义元素

如果这些设置还不够的话,那么小工具就是最强大的工具

avada菜单设置小工具

Avada在菜单中提供了嵌入小工具区域功能,只需要选择就可以使用任意的小工具,甚至包括整个侧边栏都是可以放到菜单中的

有些人可能会担心小工具不够用,没关系,Avada支持自己添加小工具区域,AVADA添加小工具区域,你可以随意的添加和删除这些小工具

avada添加小工具设置

你可以在小工具区域添加任何自己想要的元素,包括文章、图片、标签云、甚至幻灯片都是可以的,如果你懂代码的话,还可以添加自定义的HTML等

当然就算你使用代码,也能制作出很漂亮的网页,使用Avada只要用心设计,付出时间,就能做出自己想要的网页

 

avada超级菜单

另外,当超级设置好之后,可以检查一下有没有不合适的地方,再通过修改或者和Theme Opitons中的菜单设置一起调整,做出想要的效果

 

总体来说Avada的菜单还是非常强大的,刚刚接触可能会不懂它的设计原理,只要熟练了,会让你的网站更加与众不同

 

发表评论

\