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

在web端的后臺管理平臺，我們經(jīng)?？吹竭@樣的側(cè)導(dǎo)航。

我們來簡單模仿一下交互效果，此教程主要是運用動態(tài)面板的顯隱和推拉動元件的效果：

一、頁面布局

從左側(cè)元件庫拉入一個【矩形】作為【模塊導(dǎo)航1】，一個【動態(tài)面板】作為【二級導(dǎo)航】，寬度設(shè)置為一樣，如下：

雙擊【動態(tài)面板01】，編輯【state1】，添加4個【矩形】作為展開的子導(dǎo)航。如下：

為了美觀，可以讓每個矩形的文字居左，距離左邊20像素，選中矩形后，點擊右側(cè)的【樣式】中的【填充】，【左】的值為20。

接下來，復(fù)制矩形【模塊導(dǎo)航1】及動態(tài)面板【01】，并命名為矩形【模塊導(dǎo)航1】和【模塊導(dǎo)航2】，動態(tài)面板【02】和動態(tài)面板【03】，（切記：讓【模塊導(dǎo)航2】對齊在動態(tài)面板【01】下面，【模塊導(dǎo)航3】對齊在【模塊導(dǎo)航2】下面，然后，全部左對齊），最終排版效果如下：

二、添加交互

同時選中【模塊導(dǎo)航1】、【模塊導(dǎo)航2】、【模塊導(dǎo)航3】，右鍵，點擊【設(shè)置選項組】。（目的：是為了讓模塊之間的選中樣式，點擊選中其中一個，其它模塊為不選中）。

同樣，選中其中的【交互樣式】，添加【懸浮】和【選中】的交互樣式，如下：

接下來，需要實現(xiàn)點擊某個【模塊導(dǎo)航】則展開其【二級導(dǎo)航】并收起其他【模塊導(dǎo)航】的【二級導(dǎo)航】。

首先，將動態(tài)面板【02】、【03】設(shè)置為隱藏，由于頁面初始加載時，【01】時處于默認(rèn)展開狀態(tài)，所以不隱藏。

其次，給【模塊導(dǎo)航1】添加【鼠標(biāo)單擊時】的交互效果，選擇左側(cè)的【元件】-》【設(shè)置選中】-》【當(dāng)前元件】，設(shè)置如下：

并選擇左側(cè)的【元件】-》【顯示/隱藏】-》勾選【01】動態(tài)面板，可見性為“顯示”，動畫為“向下滑動”，500毫秒，更多選項為“推動元件”，方向為“下方”。設(shè)置如下：

再勾選【02】動態(tài)面板和【03】動態(tài)面板，可見性都為“隱藏”，動畫為“向上滑動”，500毫秒，勾選“拉動元件”，方向為“下方”。設(shè)置如下：

同理，給【模塊導(dǎo)航2】和【模塊導(dǎo)航3】添加同樣【鼠標(biāo)單擊時】的交互效事件。

三、交互細(xì)節(jié)調(diào)整

1. 切記：添加【鼠標(biāo)單擊時】的交互效果時，【模塊導(dǎo)航2】則顯示【02】動態(tài)面板，【模塊導(dǎo)航3】則顯示【03】動態(tài)面板。

2. 由于初始加載頁面時，【01】動態(tài)面板子導(dǎo)航是默認(rèn)展示，因此，需要將【模塊導(dǎo)航1】設(shè)置為【選中】狀態(tài)。

四、預(yù)覽效果

歡迎大家留言評論，也可以留下你期待看到的交互效果。學(xué)習(xí)更多教程可以關(guān)注本人微信公眾號：艾斯的Axure峽谷。

示例下載：

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

示例演示：

作者：火星人～艾斯，公眾號：艾斯的Axure峽谷

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

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