起點課堂會員權益
職業體系課特權
線下行業大會特權
個人IP打造特權
30+門專項技能課
1300+專題課程
12場職場軟技能直播
12場求職輔導直播
12場專業技能直播
會員專屬社群
榮耀標識Axure9原型設計：動態面板實現手風琴菜單（低配版）
編輯導語：手風琴菜單常常在多級目錄中使用，是系統設計中常見的設計之一。本文作者主要分享了用Axure9動態面板如何實現手風琴菜單效果，一起來看看~
在學習動態面板的時候，看到5分鐘玩轉Axure之動態面板（進階）手風琴菜單效果很好，只是寫的不夠詳細，在一番摸索后，貌似到達了同樣的效果。所以分享出來，做一個簡單的示例說明。
步驟如下：
一、拖拉元件
（1）先拖一個動態面板，命名：手風琴菜單
（2）給“手風琴菜單”添加一個狀態，命名：一級菜單
（3）在“一級菜單”里，添加3個矩形框作為一級菜單項，3個箭頭作為模擬菜單打開關閉效果，3個動態面板作為二級菜單內容，分別命名清楚（命名只是為了我們交互時可以清晰看到元件名稱，方便檢查邏輯），效果如下：
（4）給“二級菜單1”設置不可見和自適應內容，并添加一個狀態，添加3個矩形框作為二級菜單項
（5）同樣搞定“二級菜單2”、“二級菜單3”，效果如下：
二、添加交互
（1）給矩形框“一級菜單1”添加“單擊”交互，效果是將對應的“二級菜單1”內容給展開和折疊。
（2）添加事件“單擊時”，單擊有2個情形：展開和折疊
（3）添加情形“展開”，條件是動態面板“二級菜單1”不可見時
（4）添加動作“移動”，將動態面板“二級菜單1”移動到達矩形框“一級菜單1”的底部（坐標可以用編輯器來完成，用變量好過于自己計算固定值）
（5）添加動作“顯示/隱藏”，將動態面板“二級菜單1”顯示出來，并且把下方的元件往下推
（6）添加動作“旋轉”，將圖標“箭頭1”旋轉180°
（7）添加情形“折疊”，條件是動態面板“二級菜單1”可見時
（8）添加動作“顯示/隱藏”，將動態面板“二級菜單1”隱藏起來，并且下方的元件往回拉
（9）添加動作“旋轉”，將圖標“箭頭1”旋轉180°
邏輯解讀就是當鼠標點擊菜單1時將菜單1的子項展示出來，二次點擊時隱藏起來。箭頭的效果聊勝于無。
同樣的方式，來設置另外2個一級菜單的單擊交互。只是把元件搞清楚不要混了，這時候命名的重要性就體現出來了。
這只是一個簡單實現的手風琴菜單，進階應該是用中繼器（這個還沒學會）。
其中的變量推薦看這位作者的文章：YeeMoon
#相關閱讀#
本文由 @頭發漸少脾氣漸漲 原創發布于人人都是產品經理，未經許可，禁止轉載
題圖來自Unsplash，基于CC0協議。
老師，為啥我的AXURE9 沒有 “ 推動”和“拉動”選項,只有展開元件
移動函數那里怎么設置？我按照你的方法后，二級菜單1.1會跳轉到一級菜單的左上方？？！
搞定沒，沒搞定可以把文件發給我看下。
沒有搞定，怎么發給你文件??？
Q 42333299
添加了，請通過！
我的axure9沒有展開折疊動作
你可以看我另外一篇《Axure9原型設計：動態面板實現頁面增刪改查模式彈窗效果》，里面有個截圖，說如何“添加情形”，你問的“展開折疊”這個不是動作，這個是情形。仔細觀察一下，鼠標移過去就有顯示。
為什么不把二級菜單，直接放到對應一級菜單的下方呢？ 這樣連“移動”這一步都省了
有道理。
不過我想的是解耦，這樣更能體現獨立的元件。另外就是方便變動的時候，避免拖拉。
哈哈，原來如此。我就是考慮成最快速了。
把二級菜單放在一級菜單下，然后變成組合。 事件只要一個就可以了，都不用分展開和折疊。就是 切換/“二級菜單的可見性”即可。
axure還是好難用啊
還好吧，可能我還是初級選手，所以也只用到粗淺的功能。