起點課堂會員權益
職業體系課特權
線下行業大會特權
個人IP打造特權
30+門專項技能課
1300+專題課程
12場職場軟技能直播
12場求職輔導直播
12場專業技能直播
會員專屬社群
榮耀標識Axure：一分鐘制作二級折疊菜單
上一篇文章寫的拖動列表，里面用了一些公式計算有朋友說有點復雜了，今天做一個二級折疊菜單，個人認為算是我看到的所有文章里步驟最簡單的實現辦法了，如有更簡單的歡迎交流討論~
效果如下：
步驟如下：
（1）準備一二級菜單
畫4個矩形，填充一些顏色和文字加以標記，如下圖。然后選中二級菜單的三個矩形框（1.1-1.2-1.3）轉動態面板命名“2ndPannel”并隱藏，不再附圖。
（2）添加事件
為矩形框“一級菜單”添加3個事件，分別如下圖。然后將矩形框“一級菜單”和2ndPannel一起選中復制2份擺放好，更改一下文字內容，不再附圖。
- 事件1：單擊時針對當前元件切換選中狀態；
- 事件2：選中時顯示2ndPannel；
- 事件3：取消選中時隱藏2ndPannel。
（3）設定組合
這是最簡單卻又是很重要的一步，選中三個矩形框“一級菜單”組合（Ctrl+G）并設置選項組名稱“1st”，這時要注意了，有兩個輸入框的標題同樣都是“設置選項組名稱：”，第一個輸入名字是不能實現我們需求的的，需要拉到底在最后那個輸入名字才行，你可以試試看驗證一下。
走到這一步，基本上就實現了點擊一級菜單出現二級菜單，點擊別的一級菜單收起之前展開的二級菜單這樣的效果，但是動畫是沒有的，不需要動畫就到此結束了。
（4）添加動畫效果
需要回退到第二步修改里面的事件2、事件3，如下圖。要說明的是顯示之前一定要有個等待，時長與顯示動畫時長一樣，不添加等待會有大片空白出現，你可以試試看驗證一下。
二級折疊菜單，你試試看一分鐘能否搞定。
本文由 @y13110 原創發布于人人都是產品經理。未經許可，禁止轉載
題圖來自Unsplash，基于CC0協議
pm&pm
評論
為什么我照著做實現不了 ??
源文件，7天有效：鏈接: https://pan.baidu.com/s/1oXNkVY2OgKO9FiLa0gKXbQ 提取碼: g56n
很棒，完結了我多年的一個心愿
額，多年，膜拜大神 ??
實現效果后，菜單切換時會一直往下生成空白地方？？
大片空白我之前也遇到了，顯示二級菜單之前一定要收回其他，所以加了等待，看第4步。
為啥我跟你一樣有第步了還是這樣？是不是要加入移動跟隨?
我在制作三級折疊加了移動，這篇文章沒有添加移動，你再檢查下？
樓主，3個一級菜單只要設置選項組就OK了吧，組合后并不能實現案例中的效果誒
設置選項組會有強制命名也是ok的，組合是我的操作習慣（快捷鍵按多了），組合后一定要設置選項組名稱并且輸入的位置，你再試試？
并且注意輸入的位置，漏了兩個字。見第3步。