本文為大家演示了，如何用Axure實現側導航欄收縮、展開的效果，enjoy~

在web端的后臺管理平臺，我們經?？吹竭@樣的側導航。

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

一、頁面布局

從左側元件庫拉入一個【矩形】作為【模塊導航1】，一個【動態面板】作為【二級導航】，寬度設置為一樣，如下：

雙擊【動態面板01】，編輯【state1】，添加4個【矩形】作為展開的子導航。如下：

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

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

二、添加交互

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

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

接下來，需要實現點擊某個【模塊導航】則展開其【二級導航】并收起其他【模塊導航】的【二級導航】。

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

其次，給【模塊導航1】添加【鼠標單擊時】的交互效果，選擇左側的【元件】-》【設置選中】-》【當前元件】，設置如下：

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

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

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

三、交互細節調整

1. 切記：添加【鼠標單擊時】的交互效果時，【模塊導航2】則顯示【02】動態面板，【模塊導航3】則顯示【03】動態面板。

2. 由于初始加載頁面時，【01】動態面板子導航是默認展示，因此，需要將【模塊導航1】設置為【選中】狀態。

四、預覽效果

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

示例下載：

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

示例演示：

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

本文由 @火星人～艾斯 原創發布于人人都是產品經理。未經許可，禁止轉載

題圖來自Unsplash，基于CC0協議