在web端的后臺(tái)管理平臺(tái)，我們經(jīng)沉迫希看到這樣的側(cè)導(dǎo)航。
演示地址：http://www.wulihub.com.cn/go/WXpjZW/index.html
我們來(lái)簡(jiǎn)單模仿一下交互效果，此教程主要是運(yùn)用動(dòng)態(tài)面板的顯隱和推拉動(dòng)元件的效果：
如圖在axure里新建一個(gè)矩形赤兴，文字為模塊導(dǎo)航1，再新建一個(gè)動(dòng)態(tài)模版命名為01隧哮，動(dòng)態(tài)面板里編輯state,依次添加4個(gè)矩形分別為模塊一桶良，模塊二模塊三，模塊四 如圖
然后分別復(fù)制矩形：模塊導(dǎo)航2沮翔，模塊導(dǎo)航3陨帆，和動(dòng)態(tài)面板02，動(dòng)態(tài)面板03.布局如下：
調(diào)整布局采蚀，把動(dòng)態(tài)面板02疲牵，03設(shè)為隱藏，如圖：
下一步全部選種榆鼠，模塊導(dǎo)航1.2和3纲爸，設(shè)置選項(xiàng)組和交換樣式，如圖：
交互樣式添加【懸浮】和【選中】的交互樣式妆够，如圖：
這里要注意的是识啦，模塊導(dǎo)航一默認(rèn)選中的负蚊，所以得設(shè)置一下：
接下來(lái)就是添加交互效果了，給【模塊導(dǎo)航1】添加【鼠標(biāo)單擊時(shí)】的交互效果袁滥，選擇左側(cè)的【元件】-》【設(shè)置選中】-》【當(dāng)前元件】盖桥，設(shè)置如下
并選擇左側(cè)的【元件】-》【顯示/隱藏】-》勾選【01】動(dòng)態(tài)面板，可見(jiàn)性為“顯示”题翻，動(dòng)畫為“向下滑動(dòng)”揩徊，500毫秒，更多選項(xiàng)為“推動(dòng)元件”嵌赠，方向?yàn)椤跋路健彼芑模俟催x【02】動(dòng)態(tài)面板和【03】動(dòng)態(tài)面板，可見(jiàn)性都為“隱藏”姜挺，動(dòng)畫為“向上滑動(dòng)”齿税，500毫秒，勾選“拉動(dòng)元件”炊豪，方向?yàn)椤跋路健?/p>
然后再根據(jù)這個(gè)原則凌箕，依次設(shè)置模塊導(dǎo)航2，和三的交互效果词渤。牵舱。如圖
切記：添加【鼠標(biāo)單擊時(shí)】的交互效果時(shí)，【模塊導(dǎo)航2】則顯示【02】動(dòng)態(tài)面板缺虐，【模塊導(dǎo)航3】則顯示【03】動(dòng)態(tài)面板芜壁。
設(shè)置完成后，整個(gè)原型就做完啦高氮，是不是很簡(jiǎn)單呢慧妄？
原型下載：
