摘要：手風(fēng)琴菜單常?？梢栽赑C端的頁(yè)面中可以看到，無(wú)論是管理后臺(tái)的左側(cè)導(dǎo)航菜單還是個(gè)人中心的折疊菜單都可以看到手風(fēng)琴菜單的身影，今天就和大家分享如何利用Axure RP 9制作可收縮的手風(fēng)琴菜單。圖1為手風(fēng)琴菜單示意圖。

圖1-示意圖.png

| 線框圖準(zhǔn)備

1. 拖動(dòng)三個(gè)矩形至設(shè)計(jì)區(qū)域，編輯菜單內(nèi)容，作為一級(jí)菜單，分別命名為系統(tǒng)一、系統(tǒng)二、系統(tǒng)三，如圖2所示。
2. 拖動(dòng)三個(gè)矩形至設(shè)計(jì)區(qū)域，編輯菜單內(nèi)容，作為二級(jí)菜單，選中這三個(gè)矩形，將其轉(zhuǎn)換為動(dòng)態(tài)面板，命名為系統(tǒng)一菜單，如圖3所示。

3. 將系統(tǒng)一菜單復(fù)制兩份，分別作為系統(tǒng)二和系統(tǒng)三的二級(jí)菜單，修改名稱為系統(tǒng)二菜單、系統(tǒng)三菜單。將二級(jí)菜單分別移至對(duì)應(yīng)的一級(jí)菜單下方，隱藏所有二級(jí)菜單。

   
   
   圖2-一級(jí)菜單.png

圖3-二級(jí)菜單.png

| 制作交互

選中一級(jí)菜單系統(tǒng)一，添加鼠標(biāo)單擊時(shí)事件，隱藏系統(tǒng)二菜單、系統(tǒng)三菜單，設(shè)置向下拉動(dòng)效果；切換系統(tǒng)一菜單的可見(jiàn)性，設(shè)置向下拉動(dòng)效果。按照同樣的方法為另外兩個(gè)一級(jí)菜單設(shè)置鼠標(biāo)單擊事件，隱藏另外兩個(gè)二級(jí)菜單，切換當(dāng)前一級(jí)菜單下的二級(jí)菜單的可見(jiàn)性。如圖4所示。
假設(shè)系統(tǒng)默認(rèn)展開(kāi)系統(tǒng)三的菜單，則頁(yè)面默認(rèn)隱藏另外兩個(gè)二級(jí)菜單。為頁(yè)面添加載入事件，隱藏系統(tǒng)一菜單、系統(tǒng)二菜單。如圖5所示。
在這里我們希望為二級(jí)菜單項(xiàng)增加鼠標(biāo)懸停的交互效果，設(shè)置鼠標(biāo)懸停的樣式：填充色為#D4D4D4，文字顏色為#2A2A2A。如圖6所示。

圖4-一級(jí)菜單交互.png

圖5-頁(yè)面載入事件.png

圖6-鼠標(biāo)懸停樣式.png

至此，手風(fēng)琴菜單的交互原型已經(jīng)制作完畢，點(diǎn)擊預(yù)覽查看原型效果。

剛才我們利用動(dòng)態(tài)面板的的顯示/隱藏動(dòng)作，以及拉動(dòng)的動(dòng)畫效果完成了手風(fēng)琴菜單的制作，下面我們?cè)谥v解利用中繼器實(shí)現(xiàn)手風(fēng)琴交互原型。

| 線框圖準(zhǔn)備

1. 拖動(dòng)三個(gè)矩形至設(shè)計(jì)區(qū)域，編輯菜單內(nèi)容，作為一級(jí)菜單，分別命名為系統(tǒng)一、系統(tǒng)二、系統(tǒng)三。
2. 拖動(dòng)中繼器至設(shè)計(jì)區(qū)域，雙擊編輯中繼器，隱藏矩形線框。編輯中繼器數(shù)據(jù)集，添加一列數(shù)據(jù)menu作為二級(jí)菜單內(nèi)容，如圖7所示。將中繼器轉(zhuǎn)換為動(dòng)態(tài)面板，命名為二級(jí)菜單。

3. 連續(xù)復(fù)制兩次動(dòng)態(tài)面板的狀態(tài)，修改兩個(gè)狀態(tài)中繼器的數(shù)據(jù)集內(nèi)容，修改為系統(tǒng)二菜單內(nèi)容、系統(tǒng)三菜單內(nèi)容。動(dòng)態(tài)面板的三個(gè)狀態(tài)分別命名為系統(tǒng)一菜單、系統(tǒng)二菜單和系統(tǒng)三菜單。

   
   
   圖7-編輯二級(jí)菜單.png

| 交互制作

為動(dòng)態(tài)面板各狀態(tài)的中繼器設(shè)置每項(xiàng)加載事件，將數(shù)據(jù)集內(nèi)容載入到中繼器的項(xiàng)，如圖8所示。
為系統(tǒng)一添加鼠標(biāo)單擊事件，如果當(dāng)前元件的底部不等于二級(jí)菜單的頂部，并且二級(jí)菜單處于顯示狀態(tài)，則隱藏二級(jí)菜單；否則，隱藏二級(jí)菜單，移動(dòng)二級(jí)菜單到達(dá)當(dāng)前元件的正下方，設(shè)置動(dòng)態(tài)面板狀態(tài)為系統(tǒng)一菜單，設(shè)置“如果隱藏則顯示”。設(shè)置顯示或隱藏動(dòng)作時(shí)，均設(shè)置向下推動(dòng)效果。交互設(shè)置如圖9所示。系統(tǒng)二和系統(tǒng)三的交互設(shè)置同系統(tǒng)一相同，僅在設(shè)置動(dòng)態(tài)面板的狀態(tài)有所不同。如圖10所示。

圖8-中繼器加載二級(jí)菜單.png

圖9-系統(tǒng)一交互.png

圖10-系統(tǒng)二、三交互.png

在這里我們希望為二級(jí)菜單項(xiàng)增加鼠標(biāo)懸停的交互效果，設(shè)置鼠標(biāo)懸停的樣式：填充色為#D4D4D4，文字顏色為#2A2A2A。
至此，手風(fēng)琴菜單已經(jīng)制作完畢，點(diǎn)擊預(yù)覽查看原型。

解決一個(gè)問(wèn)題的方法有很多種，大家也可以嘗試其他的方法實(shí)現(xiàn)手風(fēng)琴菜單，其實(shí)還有一種左右伸縮的手風(fēng)琴菜單效果，原理與上下折疊式的相同，大家如果有興趣，也可以制作左右伸縮的圖片手風(fēng)琴菜單。
關(guān)注本賬號(hào)或連載可免費(fèi)學(xué)習(xí)更多Axure原型教程。