原创分享-使用avada的megamenu功能实现子菜单图片导航（类似rambotech网站的效果）

由于很多同学都喜欢实现这个功能，但是代码问题比较多，所以干脆把编辑好的代码一次性写出来给大家，直接把以下代码放到theme options - custom css里面即可

wrapper .fusion-megamenu-wrapper .fusion-megamenu-icon img, .fusion-megamenu-icon img { margin-top: -2px; max-height: 100%; vertical-align: middle; }

`wrapper .fusion-megamenu-wrapper .fusion-megamenu-submenu{`

display: table-cell;
float: none;
padding: 10px 0;
border-right: 0px;

}

`wrapper .fusion-megamenu-wrapper .fusion-megamenu-holder .fusion-megamenu-submenu:hover{background-color:#ffffff;}`

tr{border:solid 1px #ccc;padding:3px;}

.sidebar .widget h3{font-size:18px!important;font-weight:bold!important;}


.fusion-image-wrapper .fusion-rollover .fusion-rollover-content .fusion-rollover-categories{display:none!important;}

自从用了AVADA就发现深深的爱上了这个主题，因为它的功能太强大了。自从上次MRHUA分析了RAMBOTECH的网站有图片导航以后，就很渴望实现这个功能，今天终于在AVADA中很简单的实现了。下面进入正题：

准备工作：需要分类的产品图片，最好是透明底的PNG图片，大小一致

1.在apperance-menus-当前MENU中点开需要编辑的一级菜单，如图编辑

2.然后在子菜单中进行编辑，如图：

切记：每上传一个thumbnail图片就要马上保存一次，否则会出现错误。

3.上传完所有的thunmbnail后，就会出现以下效果：

可以看到图片很小，这时候就需要调CSS了

4.用审查元素找到以下CSS代码，

wrapper .fusion-megamenu-wrapper .fusion-megamenu-icon img, .fusion-megamenu-icon img {

1. margin-top: -2px;
2. max-height: 100%;
3. vertical-align: middle;
} 把max-height的值改为100%，并保存，于是菜单就变成以下样子：

5.可以看到，上图里面的图片还原了大小，但是上下左右间距不美观，那么就接着改，
接下来是调整边缘，同样找到以下CSS代码

#wrapper .fusion-megamenu-wrapper .fusion-megamenu-submenu{

1. display: table-cell;
2. float: none;
3. padding: 10px 0;设置内间距的大小
4. border-right: 1px solid #dcd9d9; 设置边框，若想去掉边框，把1px改成0px即可。

}

6.在 #wrapper .fusion-megamenu-wrapper .fusion-megamenu-title {

1. margin-top: 0;
2. padding: 0 10px 0px 10px; --调整内距
3. font: 18px 'MuseoSlab500Regular', arial, helvetica, sans-serif;
4. font-weight: normal;

}

结果如下图：

可以看到文字距右侧太远了，那么可以加以下代码改整个子菜单的宽度，

.row .fusion-megamenu-holder{width:700px! important ;} 这个是改成700PX宽度的效果，如果是3列的话，那每个列为233PPX 宽。可以根据实际情况改这个数字

8.另个每一个字菜单添加背景HOVER效果，以增加用户体验，可以添加如下CSS:

#wrapper .fusion-megamenu-wrapper .fusion-megamenu-holder .fusion-megamenu-submenu:hover{background-color:#ffffff;}

效果如下图：