写文章
夜光巴比
2015-07-18 14:16

【Avada女神经-导航篇】如何用Avada制作分栏图文导航

最近在准备Avada相关的系列帖子,问题征集和汇总贴在此,方便大家全面点赞,哈哈……

(积分让脸皮都变厚了……)

 Avada问题征集贴——包含问题回复帖子传送门儿

很多同学在看Avada Demo站的时候,对于Avada的分栏导航很感觉兴趣……

Avada-Mega_Menu.png


像大家常学习的M颜做的RamboTech网站上,也有产品的分栏导航,并且加了用产品图片儿做成了图片儿导航……

RamboTech图片导航.png


那这种导航是怎么做的呢……今天就简单的说一下……

首先像Avada portfolio项的子菜单的这个效果,叫flyout submenu……名字就表示的很清楚了,子菜单儿是灰出来的,这也是Avada默认的子菜单样式……

Avada-Flyout_Submenu.png


像Page页面下这种内容会有分栏的导航,叫mega menu……

Avada-Mega_Menu.png



*Avada的分栏导航设置
第一步:检查主题支持
包括Avada、the7在内的很多付费主题都是支持mega menu的……但支持度和客制化的程度会有区别……
一般看看主题的Demo站是否有这个导航的样式,就大致知道是不是支持了……
Avada的支持与否是可以设置的……
如果你没有修改过Avada的默认设置,mega menu是默认支持的……
想设置这个功能的同学,首先要去要Avada的theme option-advanced的标签页下,检查下这个设置……

disable_mega_menu.png


只有这个勾去掉的情况下,分栏导航的功能才能够设置和使用……否则是死活做不出来的……
如果你的所有主菜单儿都不需要mega menu的功能,就可以把这个勾点上了……

第二步:在Menu编辑页设置
选择你要做的那个menu,如果你有多个menu的话……
然后找到你要设置为分栏子菜单儿的那项主菜单儿……比如我的这项Portfolio……

Portfolio下拉设置.png


点开这里出现下拉菜单儿的设置……

Enable_Fusion_Mega_Menu.png


当你的theme option没有禁用mega menu的时候,就会出现这个设置了……把这个勾点上……
full width mega menu这个选项是自动把你的下拉分栏菜单儿变成和你的主菜单儿一样全宽的,如果没必要这么做,可以不选……

mega_menu_number_of_columns.png


在这个位置就能设置你想要的分栏数了……
也可以选项自动……它会根据你在这个主菜单项下建立的子菜单儿和子菜单儿的子菜单儿(我能犯二叫孙菜单儿不?)的内容自动显示的……
设置好这里就可以建portfolio下的子菜单儿了,如果有多级子菜单儿的话,一级子菜单儿会成为Heading,二级子菜单儿会成为分栏的内容……
像Avada Demo站导航的Home的mega menu在后台就是这样子的……

Home子菜单的后台样式.png



第三步:插入图片儿
在菜单下拉设置项里会有一个set thumbnail,点击它就可以设置当前菜单项的图片儿了……

稍后做个菜单儿出来,把会出现的问题再整理下,嘿嘿……

关注作者,看更多TA的好文章 个人展示
夜光巴比 谁在评论里提醒下这位作者,懒得连名片都没填写。
举报
收藏
转发
0/500
添加表情
评论
评论 (46)
最近
最早
3天2夜学会建站

夜光巴比

还记得大明湖畔的容嬤嬷吗?对的,就是我,啊哈哈……千万不要跟我聊,否则,你不一定会笑还是会哭……当然,作为一个集逗比与高冷于一身的……逗比,我想说原谅我这一生不羁放纵笑点低,天生逗比难自弃~~哇哈哈

向TA提问
置顶时间 :

设置帖子类型

普通
新闻
活动
修改

圈内转发

0/104

分享至微信

复制链接

举报

请选择举报理由

留联系方式
垃圾广告
人身攻击
侵权抄袭
违法信息
举报

确认要删除自己的评论吗?

取消 确定

确认要删除自己的文章吗?

取消 确定
提问
设置提问积分
当前可用积分:
-
+
20
50
100
200
偷看

积分偷看

10积分
我的积分(可用积分)
确认偷看

问题已关注

答主回复后,系统将通知你

不再提示