摘要：手風(fēng)琴菜單常彻嗍铮可以在PC端的頁面中可以看到慷丽，無論是管理后臺(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)一菜單的可見性私股，設(shè)置向下拉動(dòng)效果。按照同樣的方法為另外兩個(gè)一級(jí)菜單設(shè)置鼠標(biāo)單擊事件恩掷，隱藏另外兩個(gè)二級(jí)菜單倡鲸，切換當(dāng)前一級(jí)菜單下的二級(jí)菜單的可見性。如圖4所示黄娘。
假設(shè)系統(tǒng)默認(rèn)展開系統(tǒng)三的菜單峭状，則頁面默認(rèn)隱藏另外兩個(gè)二級(jí)菜單克滴。為頁面添加載入事件，隱藏系統(tǒng)一菜單优床、系統(tǒng)二菜單劝赔。如圖5所示。
在這里我們希望為二級(jí)菜單項(xiàng)增加鼠標(biāo)懸停的交互效果胆敞，設(shè)置鼠標(biāo)懸停的樣式：填充色為#D4D4D4着帽，文字顏色為#2A2A2A。如圖6所示移层。

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

圖5-頁面載入事件.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è)問題的方法有很多種章姓，大家也可以嘗試其他的方法實(shí)現(xiàn)手風(fēng)琴菜單，其實(shí)還有一種左右伸縮的手風(fēng)琴菜單效果识埋，原理與上下折疊式的相同凡伊，大家如果有興趣，也可以制作左右伸縮的圖片手風(fēng)琴菜單窒舟。
關(guān)注本賬號(hào)或連載可免費(fèi)學(xué)習(xí)更多Axure原型教程系忙。