在web端的后臺(tái)管理平臺(tái)，我們經(jīng)常看到這樣的側(cè)導(dǎo)航。
我們來簡單模仿一下交互效果，此教程主要是運(yùn)用動(dòng)態(tài)面板的顯隱和推拉動(dòng)元件的效果：
一、頁面布局
從左側(cè)元件庫拉入一個(gè)【矩形】作為【模塊導(dǎo)航1】，一個(gè)【動(dòng)態(tài)面板】作為【二級(jí)導(dǎo)航】，寬度設(shè)置為一樣，如下：
雙擊【動(dòng)態(tài)面板01】，編輯【state1】，添加4個(gè)【矩形】作為展開的子導(dǎo)航。如下：
為了美觀，可以讓每個(gè)矩形的文字居左，距離左邊20像素，選中矩形后，點(diǎn)擊右側(cè)的【樣式】中的【填充】，【左】的值為20。
接下來，復(fù)制矩形【模塊導(dǎo)航1】及動(dòng)態(tài)面板【01】，并命名為矩形【模塊導(dǎo)航1】和【模塊導(dǎo)航2】，動(dòng)態(tài)面板【02】和動(dòng)態(tài)面板【03】，（切記：讓【模塊導(dǎo)航2】對(duì)齊在動(dòng)態(tài)面板【01】下面，【模塊導(dǎo)航3】對(duì)齊在【模塊導(dǎo)航2】下面，然后，全部左對(duì)齊），最終排版效果如下：
二、添加交互
同時(shí)選中【模塊導(dǎo)航1】、【模塊導(dǎo)航2】、【模塊導(dǎo)航3】，右鍵，點(diǎn)擊【設(shè)置選項(xiàng)組】。（目的：是為了讓模塊之間的選中樣式，點(diǎn)擊選中其中一個(gè)，其它模塊為不選中）。
同樣，選中其中的【交互樣式】，添加【懸浮】和【選中】的交互樣式，如下：
接下來，需要實(shí)現(xiàn)點(diǎn)擊某個(gè)【模塊導(dǎo)航】則展開其【二級(jí)導(dǎo)航】并收起其他【模塊導(dǎo)航】的【二級(jí)導(dǎo)航】。
首先，將動(dòng)態(tài)面板【02】、【03】設(shè)置為隱藏，由于頁面初始加載時(shí)，【01】時(shí)處于默認(rèn)展開狀態(tài)，所以不隱藏。
其次，給【模塊導(dǎo)航1】添加【鼠標(biāo)單擊時(shí)】的交互效果，選擇左側(cè)的【元件】-》【設(shè)置選中】-》【當(dāng)前元件】，設(shè)置如下：
并選擇左側(cè)的【元件】-》【顯示/隱藏】-》勾選【01】動(dòng)態(tài)面板，可見性為“顯示”，動(dòng)畫為“向下滑動(dòng)”，500毫秒，更多選項(xiàng)為“推動(dòng)元件”，方向?yàn)椤跋路健?。設(shè)置如下：
再勾選【02】動(dòng)態(tài)面板和【03】動(dòng)態(tài)面板，可見性都為“隱藏”，動(dòng)畫為“向上滑動(dòng)”，500毫秒，勾選“拉動(dòng)元件”，方向?yàn)椤跋路健?。設(shè)置如下：
同理，給【模塊導(dǎo)航2】和【模塊導(dǎo)航3】添加同樣【鼠標(biāo)單擊時(shí)】的交互效事件。
三、交互細(xì)節(jié)調(diào)整
1. 切記：添加【鼠標(biāo)單擊時(shí)】的交互效果時(shí)，【模塊導(dǎo)航2】則顯示【02】動(dòng)態(tài)面板，【模塊導(dǎo)航3】則顯示【03】動(dòng)態(tài)面板。
2. 由于初始加載頁面時(shí)，【01】動(dòng)態(tài)面板子導(dǎo)航是默認(rèn)展示，因此，需要將【模塊導(dǎo)航1】設(shè)置為【選中】狀態(tài)。
四、預(yù)覽效果
示例下載：百度云盤
示例演示：
歡迎大家留言評(píng)論，也可以留下你期待看到的交互效果。學(xué)習(xí)更多教程可以關(guān)注本人微信公眾號(hào)：艾斯的Axure峽谷。
更多Axure原型源文件下載：我的Axure作品集
