中文字幕日韩人妻无码,日韩免费观看三级片,在线高清激情视频

Avada的功能強(qiáng)大，今天來(lái)介紹下使用Avada mega menu 來(lái)實(shí)現(xiàn)AVADA主題實(shí)現(xiàn)圖片菜單導(dǎo)航的方法。

注：本文章是基于AVADA4.0+Avada5.0主題上的操作方法，如有問(wèn)題請(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è)黑三角來(lái)選擇它的列數(shù)，因?yàn)橛?個(gè)一級(jí)分類，那我們選擇3列，這樣的話每一列顯示3個(gè)菜單，共2行比較合適，不同的情況可以靈活設(shè)置。

3.接著還是在一級(jí)分類目錄的前面加上圖片，如下圖

4.所有的菜單導(dǎo)航里面添加完成后，可以看還圖片還比較小，接著來(lái)調(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í)菜單的四周比較空洞，間隙較大，依然通過(guò)CSS來(lái)調(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è)總的寬度即可