Avada的功能強(qiáng)大，今天來介紹下使用Avada mega menu 來實(shí)現(xiàn)AVADA主題實(shí)現(xiàn)圖片菜單導(dǎo)航的方法痪宰。
注：本文章是基于AVADA4.0+Avada5.0主題上的操作方法，如有問題請(qǐng)留言
準(zhǔn)備內(nèi)容:?每一個(gè)分類對(duì)應(yīng)一張圖片，100*100px秽五，最好是鏤空的PNG圖片
一. 兩級(jí)產(chǎn)品分類情況下AVADA圖片菜單導(dǎo)航的實(shí)現(xiàn)方法
1.兩級(jí)產(chǎn)品分類，即分類1-分類1.1-產(chǎn)品這種模式饥悴，如下圖坦喘，將分類加入菜單后，前臺(tái)顯示一般默認(rèn)為圖片菜單導(dǎo)航的模式（有時(shí)候安裝AVADA后又是普通的菜單導(dǎo)航西设，所以看情況靈活處理）
2. 首先在AVADA后臺(tái)appearance-menu里面打開網(wǎng)站的主菜單瓣铣，然后在分類目錄的上一級(jí)，即本例中的product菜單處將enable fusion mega menu打勾贷揽，才可以呈現(xiàn)圖片導(dǎo)航菜單的樣式棠笑，不打勾就是普通的下拉式菜單效果，如下圖
3.然后點(diǎn)擊第二級(jí)分類的黑三角擒滑，在展開的設(shè)置項(xiàng)中點(diǎn)擊set thumbnail(即縮略圖)腐晾，然后上傳你準(zhǔn)備好的分類小圖片，并保存丐一。
4.把所有的二級(jí)分類都加上圖片以后，刷新前臺(tái)淹冰，可以看到圖片都加到二級(jí)分類前面去了库车，但是較小，現(xiàn)在調(diào)大圖片的尺寸樱拴，將以下的CSS：
AVADA4.0系列代碼
.fusion-megamenu-icon img{max-height:60px!important;}
AVADA5.0系列代碼：
.fusion-megamenu-icon{width:60px!important;}
.fusion-megamenu-icon img{max-height:60px!important;}
代碼的意思是將圖片的高度設(shè)置為60px; 添加到WP后臺(tái)- AVADA - theme options-custom css中并保存柠衍，刷新前臺(tái)即可生效，如下圖
5. 圖片調(diào)整完成后晶乔，可以看到由于分類的名稱長(zhǎng)度不一樣珍坊，導(dǎo)致有一些換行了，這樣很不美觀正罢，解決的方法就是將分類左右的內(nèi)間距（CSS中的padding元素）調(diào)小一點(diǎn)阵漏，這樣就可以一行展示了
將以下的CSS代碼：
AVADA4+AVADA5系列都適用：
.fusion-megamenu-title{padding:0 15px 15px 15px!important;}
.fusion-megamenu-wrapper .fusion-megamenu-submenu .sub-menu a{padding:5px!important;}
粘貼到WP后臺(tái)- avada -theme options-custom css中并保存，刷新前臺(tái)即可生效翻具，如下圖
最后給二級(jí)分類加一個(gè)hover的效果履怯，就是鼠標(biāo)放在某個(gè)分類上面，會(huì)有顏色的變換裆泳，提高用戶體驗(yàn)叹洲，將以下CSS粘貼到WP后臺(tái)- AVADA -theme options-custom css中并保存，刷新前臺(tái)即可生效工禾，如下圖
AVADA4+AVADA5系列都適用：
.fusion-main-menu .sub-menu li a:hover{background:#00afee;color:#fff;}
二. 一級(jí)產(chǎn)品分類情況下AVADA圖片菜單導(dǎo)航的實(shí)現(xiàn)方法
有的朋友的網(wǎng)站只有一級(jí)分類运提，如下圖所示
這種也可以實(shí)現(xiàn)圖片導(dǎo)航蝗柔，下面介紹方法
1.首先還是要確保product菜單的設(shè)置里面enable fusion mega menu打上勾
2.接著是要設(shè)置菜單的排列，默認(rèn)是6個(gè)一級(jí)分類排一行民泵，這樣不太美觀癣丧，那么點(diǎn)擊右側(cè)黑三角來選擇它的列數(shù)，因?yàn)橛?個(gè)一級(jí)分類洪灯，那我們選擇3列坎缭，這樣的話每一列顯示3個(gè)菜單，共2行比較合適签钩，不同的情況可以靈活設(shè)置掏呼。
3.接著還是在一級(jí)分類目錄的前面加上圖片，如下圖
4.所有的菜單導(dǎo)航里面添加完成后铅檩，可以看還圖片還比較小憎夷，接著來調(diào)大圖片的尺寸到100PX，將以上的CSS代碼粘貼到WP后臺(tái)- AVADA -theme options-custom css中并保存昧旨，刷新前臺(tái)即可生效拾给，如下圖
AVADA4.0系列代碼
.fusion-megamenu-icon img{max-height:60px!important;}
AVADA5.0系列代碼：
.fusion-megamenu-icon{width:60px!important;margin-right:5px;}
.fusion-megamenu-icon img{max-height:60px!important;}
5.生效以后可以看到一級(jí)菜單的四周比較空洞，間隙較大兔沃，依然通過CSS來調(diào)節(jié)下蒋得，將以下的CSS加到WP后臺(tái)- AVADA - theme options-custom css中并保存，刷新前臺(tái)即可生效乒疏，如下圖
AVADA4+AVADA5系列都適用：
.fusion-megamenu-title{padding:0 10px!important;}
.fusion-megamenu-wrapper .fusion-megamenu-submenu{padding:10px 0!important;}
6.調(diào)節(jié)四周間距后發(fā)現(xiàn)右側(cè)的空隙依然較大额衙，這是因?yàn)檎麄€(gè)下拉圖片菜單的寬度已經(jīng)設(shè)置了固定的1100PX（enable fusion mega menu下面那一行full width mega menu那里打了勾），所以分成3等分之后怕吴，每個(gè)菜單的寬度就固定了窍侧，所以我們需要到后臺(tái)去修改一個(gè)總的寬度即可
7. 到WP后臺(tái)- AVADA - theme options - MENU 的mega menu里面找到mega menu full width，調(diào)節(jié)數(shù)值到最合適的數(shù)值即可转绷，然后保存刷新前臺(tái)查看已經(jīng)達(dá)到最佳效果
8. 最后還是給菜單加上HOVER的效果伟件，來提高用戶體驗(yàn)
將以下CSS粘貼到WP后臺(tái)- AVADA -theme options-custom css中并保存，刷新前臺(tái)即可生效议经，如下圖
AVADA4+AVADA5系列都適用：
.fusion-megamenu-submenu:hover{background:#a0ce4e;}
.fusion-megamenu-title?a:hover{color:#fff!important;}
設(shè)置完了斧账。
