Axure 教程：製作摺疊選單

本次教各位小夥伴製作摺疊選單，這次的做法比較簡單，大家都可以輕鬆的學會。

下面開始製作原型 ~

一、準備元件

1. 開啟 Axure 新建檔案，拉出一個矩形，w 為 200 px，h 為 40 px，色值為 #333333，在矩形內輸入“一級選單”，然後命名為“一級選單”；
2. 拖進一個矩形，同樣 w 為 200 px ，h 為 40 px ，色值改為 #FFFFFF（ 純白色 ），在矩形內輸入“選項一”；
3. 把“選項一” 在複製兩個出來，分別叫“選項二 ”、“選項三” 。

完成了以上動作，就可以得到一下的展示，看圖：

好了，完成之後我們就來開始做第二步 ~

二、設定互動樣式

（1）全選“選項一、二、三 ”，右鍵點選 互動樣式設定 ，選擇滑鼠懸停 – 填充顏色 – 色值為 #F2F2F2 、然後再選 選中 – 填充顏色 – 色值 #E4E4E4 。

如圖：

（2）繼續選中“選項一、二、三 ”，右鍵點選設定選項組名稱 ，命名為“選項”、選擇“選項一”右鍵點選 選中（ 預設選中 ），完成 。

完成了以上的設定，繼續下一步 ~

三、設定互動用例

（1）選擇“選項一 ”，設定滑鼠點選時 – 選中 – 選擇 This 為 ture ，點選確定。（ 選項二、三同上設定，複製貼上過去即可 ）。

完成以上設定，我們的選項就可以點選切換了，看效果：

（2）把 “選項一、二、三 ” 選中，右鍵點選 轉換為動態皮膚，命名為 “選項 ” ，點選把該皮膚隱藏。

（3）設定“一級選單 ” ，設定滑鼠單擊時 – 設定皮膚狀態 – 可見性：切換 、 動畫：顯示時向下 / 隱藏時向上，動畫為：線性，250 毫秒 、 勾上置於頂層 、 勾上推動元件，方向為下方，動畫為：線性，250毫秒。

這樣就完成了，為了防止大家設定錯誤，下面放一張設定的圖：

再附一張效果圖：

完成以上的製作，我們會看到了這只是單個選單而已，我們可以給它複製多個摺疊選單在一起。

四、進階

（1）全選所有元件、動態皮膚 – 右鍵點選組合，然後我們給它複製貼上 n 個，按照以下方式排列：

（2）因前面使用者設定的時候，我們已經把 “推動元件 ” 設定好了 ，所以後面無需再設定。但前面所做的，我們把 “選項一 ” 設定為預設選中狀態，這裡我們又複製了兩個，所以我們需要把多複製出來的兩個 “選項一 ”去掉預設選中狀態 。

設定完，繼續看效果：

百度雲連結：https://pan.baidu.com/s/1Axn4oFEmWkhsNtdfPlKrlA 密碼:89j0

本文轉自http://www.woshipm.com/rp/1088033.html