Axure:2分鐘制作三級折疊菜單

12 評論 8811 瀏覽 32 收藏 3 分鐘

之前看了小樓老師的三級菜單制作,跟著做了一次,學習到很多東西,但是又都還回去了。這次打算在Axure:一分鐘制作二級折疊菜單的基礎上趁熱打鐵做一個三級的,個人一直認為任何事情只要找到一定規律都能化繁為簡,目標:2分鐘搞定。

效果如下:

步驟如下:

1、準備1、2、3級菜單矩形框。

2、組合三級菜單命名“3g”,二級菜單添加3項動作:單擊時(切換選中狀態)、取消選中時(隱藏3g)和選中時(1.移動3g;2.顯示3g),如圖。然后隱藏3g。

3、隱藏3g,選中二級菜單和3g復制2份擺好位置,3個二級菜單矩形框設置選項組名稱“2g”,命名也是“2g”,不再附圖。

4、為一級菜單添加3個事件:單擊、選中、取消選中。特別說明,取消選中事件要對3個二級菜單矩形框設置取消選中,如圖。

5、隱藏2g,選中所有矩形框包括隱藏的,復制兩份擺好位置,3個一級菜單矩形框設置選項組,如圖:

二級折疊菜單,你試試看一分鐘能否搞定。

(要說明的是,沒有添加動畫,你可以試著添加,如有疑問,歡迎探討。)

 

本文由 @y13110 原創發布于人人都是產品經理。未經許可,禁止轉載

題圖來自 Pexels,基于 CC0 協議

更多精彩內容,請關注人人都是產品經理微信公眾號或下載App
評論
評論請登錄
  1. 三級菜單打開后,二級三級之間出現了空白,請教下怎么處理呢

    回復
  2. 根據操作,實現成功了。每一級的欄數不一樣,采取同樣的法子出現問題了

    來自廣東 回復
    1. 你是說二級菜單下的三級菜單數量不一樣,會有問題是吧

      來自廣東 回復
    2. 是的。

      來自廣東 回復
    3. https://kzebeb.axshare.com/ 抱歉這么久才回復,看一下是不是你說的這個情況

      來自廣東 回復
    4. 沒事。我換了一種方法實現了?,F在在學條件,有點懵

      來自廣東 回復
    5. 條件,還好吧,哪里懵可以交流下

      來自廣東 回復
    6. 好的,謝謝你~

      來自廣東 回復
    7. 不冒昧的話,源文件可以分享一下么,照著做還是有點問題

      來自廣東 回復
  3. 按照前輩這樣操作,發現出現大量空白,這個問題前輩是通過“移動”組合到絕對位置實現的嗎

    來自廣東 回復
    1. 非前輩,菜鳥也。 因為隱藏的矩形框多且分為二三級兩層,個人認為僅僅依靠推拉已經不能完美實現,故添加移動。

      來自廣東 回復
    2. 非前輩,菜鳥也。因為隱藏的矩形框多且分為二三級兩層,個人認為僅僅依靠推拉已經不能完美實現,故添加移動。

      回復