本文為大家演示了，如何用Axure實(shí)現(xiàn)側(cè)導(dǎo)航欄收縮、展開的效果，enjoy~

在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)椤跋路健薄ＴO(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峽谷。

示例下載：

https://pan.baidu.com/s/1rJwmTc-xSM1JUVeulFZWkA

示例演示：

作者：火星人～艾斯，公眾號(hào)：艾斯的Axure峽谷

本文由 @火星人～艾斯 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載

題圖來自Unsplash，基于CC0協(xié)議