Axure實例：二三級菜單展開/折疊效果的實現(xiàn)

49 評論 111113 瀏覽 164 收藏 5 分鐘

本文介紹了菜單二三級中展開/折疊效果，大家可以參考學(xué)習(xí)。

后臺系統(tǒng)的管理菜單級聯(lián)原型設(shè)計，一般后臺菜單的級別分為2、3級，也會通過結(jié)構(gòu)布局來化解菜單折疊的問題，但是有些復(fù)雜系統(tǒng)還是會需要菜單的展開折疊。

下面講一下Axure實現(xiàn)這一效果的過程：

一、準(zhǔn)備組件

  • 矩形：一級菜單
  • 矩形：二級菜單

可根據(jù)自己的需要進(jìn)行顏色、大小等區(qū)分，將一級菜單和二級菜單排列好。

二、添加交互

1. 將所有二級菜單轉(zhuǎn)化為動態(tài)面板，命名：二級菜單，并設(shè)置為隱藏

2. 選中一級菜單，添加點擊事件，選中二級菜單動態(tài)面板，可見性：切換；勾選推動/拉動元件，如下圖：

3. 將一級菜單和二級菜單全部選中，復(fù)制粘貼，粘貼的個數(shù)自己定。

效果如下圖：

三、三級菜單類似

在以上的基礎(chǔ)上編輯，選中一個一級菜單和二級菜單進(jìn)行編輯：

選擇二級菜單動態(tài)面板，編輯里面的元件，添加三級菜單。

重復(fù)以上的步驟：

  1. 先將二級菜單和三級菜單進(jìn)行排列，選中所有三級菜單，轉(zhuǎn)化為動態(tài)面板，命名：三級菜單，并設(shè)置為隱藏。

2.對二級菜單添加點擊事件。

隱藏——二級菜單——拉動元件：

切換可見性——三級菜單動態(tài)面板——可見性：切換——推動/拉動元件：

顯示——二級菜單——推動元件：

3. 選中二級菜單和三級菜單，復(fù)制、粘貼

效果如下：

4. 最后返回頂層，一級菜單的層級。

選中一級菜單和二級菜單，復(fù)制、粘貼，效果如下：

四、完成

可預(yù)覽查看效果，如有額外精細(xì)化的效果，可以自己在相應(yīng)的元件上添加效果，如下：

效果地址：https://ekmfa2.axshare.com

鑒于很多人有遇到問題，這是源文件可以參考下，鏈接: https://pan.baidu.com/s/14Eu8id8Nq9l41if6IJbHyg 密碼: pi4h

 

本文由 @西貝槑 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載

題圖來自PEXELS，基于CC0協(xié)議

更多精彩內(nèi)容，請關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號或下載App
西貝槑
3篇作品 236269總閱讀量
09-221311 瀏覽
產(chǎn)品設(shè)計中的藝術(shù)表達(dá) | 從設(shè)計與藝術(shù)的差異中尋找平衡
12-041561 瀏覽
淘金海外，中國云加速“飄”向全球
09-253223 瀏覽
產(chǎn)品經(jīng)理怎么做好需求池管理？
02-232119 瀏覽
餓了么到店業(yè)務(wù)將與高德合并，本地生活上演“三國殺”
04-112083 瀏覽
ChatGPT 一周「緊急剎車」：算力不足、被指隱私數(shù)據(jù)泄露
評論
評論請登錄

  1. 大佬，一級標(biāo)題下有的二級沒有三級標(biāo)題，有的二級有三級標(biāo)題，做出來。會錯行，有空白，跪求大佬指點。

    來自陜西 回復(fù)

  2. 妙啊，三級菜單是推不動下面的二級菜單的，通過二級菜單先隱藏再顯示的方式，可以把下面的二級菜單推掉。

    來自廣東 回復(fù)

  3. 一級菜單推不動的原因找到了，所有動態(tài)面板設(shè)置為“自適應(yīng)內(nèi)容”，，不然是真的動不了。。

    來自上海 回復(fù)

  4. 寫的很好困擾我一周了，之前的問題也是二級菜單切換的時候會推不動下面的一級菜單，樓主通過二級菜單的隱藏顯示實現(xiàn)了這玩意點個贊

    來自湖南 回復(fù)

    1. 好吧，還是不行，是不是我漏了哪里

      來自湖南 回復(fù)

    2. 是點二級菜單的時候，中間會有大片空白么，，我這也是這樣

      來自上海 回復(fù)

    3. 解決了嗎？有源文件也看不出來什么問題

      來自上海 回復(fù)

  5. 截圖錯了吧？最后那張動作編輯的截圖，第二個步驟動作應(yīng)該是：切換顯示/隱藏 “三級菜單” 推動/拉動 元件 向下

    來自浙江 回復(fù)

  6. 如果想在點開“一級菜單1”后，再點擊“一級菜單2”同時收起“一級菜單1”要怎么做呢？是給“一級菜單1”和“一級菜單2”設(shè)成一個組，還是要加上它們的動態(tài)面板一起設(shè)成一個組？

    來自四川 回復(fù)

  7. 你好，你的原型取消分享了，能不能重新發(fā)布一下呀，謝啦

    來自河南 回復(fù)

    1. 鏈接: https://pan.baidu.com/s/14Eu8id8Nq9l41if6IJbHyg 密碼: pi4h

      來自北京 回復(fù)

  8. 共享一個源文件吧

    來自北京 回復(fù)

  9. 厲害呀！設(shè)計三級菜單時，通過對二級菜單的“隱藏-顯示”動作刷新了二級菜單狀態(tài)，從而避免了三級菜單和下方一級菜單不在同一空間時重疊的情況。

    來自廣東 回復(fù)

  10. 在做三級菜單交互的時候教程有一步比較有誤導(dǎo)性，對二級菜單的交互設(shè)置一共有四步，有對三級菜單推動/拉動元件向下的操作，順序應(yīng)該是第三步，而作者的截圖里面只有1、2、4步，少了第三步，大家一定注意

    來自北京 回復(fù)

  11. 大家哪里不懂的多看評論，大神的源文件還有個鏈接，
    https://pan.baidu.com/s/1d2FTZBG0kWqgW-2QZTFqfA

    提取碼：76dh

    來自山西 回復(fù)

  12. 老大，源文件咋還刪了耶！想要 ??

    來自北京 回復(fù)

  13. 求源文件，感謝

    來自上海 回復(fù)

  14. 箭頭是如何實現(xiàn)的呢

    來自山東 回復(fù)

  15. 你好，我做好了下拉推動，但二級欄目點擊不了，要怎么修改，你發(fā)的鏈接是AXURE 9版，可以發(fā)個AXURE 8版嗎

    來自福建 回復(fù)

  16. 是版本問題嗎，你分享的原型也會出現(xiàn)切換下面的一級菜單往下移，中間出現(xiàn)空格

    來自美國 回復(fù)

    1. 這個和版本沒有關(guān)系，我看原型顯示是正常的

      來自北京 回復(fù)

  17. 您好，謝謝分享。有個問題請教，為什么要先隱藏二級再切換三級？是什么原理？我在二級添加單擊交互 切換顯示三級不行的原因是什么呀～～？

    來自廣東 回復(fù)

    1. 避免中間出現(xiàn)空白處，你可以試試不先隱藏二級試試效果就知道了

      來自北京 回復(fù)

  18. 感謝分享 ??

    來自湖南 回復(fù)

  19. 展開和收起菜單切換時，怎樣設(shè)置原件箭頭的方向?

    來自天津 回復(fù)

    1. 中心旋轉(zhuǎn)180度就可以

      來自北京 回復(fù)

  20. 照著做可以做出效果，二級菜單的交互用例要先隱藏二級，切換三級，再顯示二級的順序，要不然會錯亂。

    來自廣東 回復(fù)

  21. 感覺問題應(yīng)該出在多次復(fù)制上。。。

    來自湖北 回復(fù)

    1. 是的，我感覺也是

      來自廣東 回復(fù)

  22. 單一矩形框不可能同時添加三個有沖突的交互狀態(tài)，在做三級菜單時，樓主給二級菜單添加了圖像熱區(qū)，這是個很重要的細(xì)節(jié)，卻沒有講出來，難怪很多人照著做卻做錯了

    來自湖北 回復(fù)

    1. 可以加熱區(qū)也可以不加，熱區(qū)的主要作用就是把幾個元素同時觸發(fā)同一個事件，省去了每個元素都要添加一遍事件的麻煩

      來自北京 回復(fù)

  23. 您好，我一級菜單展開收起效果都對，就是一級展開的時候二級第一個矩形不知道為什么不見了，但是位置是有的，這個是什么情況？

    來自廣東 回復(fù)

    1. 這個我也定位不到啥問題 ? ，，，你看看源件是不是可以找到原因 鏈接:https://pan.baidu.com/s/1AqKTz-SHO1TlgmpS4VDFjQ 密碼:8yin

      來自北京 回復(fù)

  24. 3級菜單第二部是不是寫的有問題，實現(xiàn)不了

    來自臺灣 回復(fù)

    1. 原型分享失效了 ?

      來自臺灣 回復(fù)

  25. 作者可以再寫細(xì)致一點嗎？按這個步驟推拉效果，位置根本對不齊，能不能分享下原型（Axure原件）。我自己用位置函數(shù)做的沒問題

    來自浙江 回復(fù)

    1. 鏈接:https://pan.baidu.com/s/1d2FTZBG0kWqgW-2QZTFqfA 密碼:76dh 源件地址

      來自北京 回復(fù)

    2. 謝謝分享，我去研究下哪里出問題了。用位置函數(shù)做太繁瑣了，你這個簡便很多

      來自浙江 回復(fù)

  26. 您好，為什么點擊一級菜單1，下拉的菜單都被蓋在一級菜單2下面，一級菜單2始終懸浮在上面，沒有被推下去 哎

    來自上海 回復(fù)

    1. 鏈接:https://pan.baidu.com/s/1d2FTZBG0kWqgW-2QZTFqfA 密碼:76dh 源文件地址，可自己檢查下

      來自北京 回復(fù)

    2. 我也遇到了這個問題

      來自廣東 回復(fù)

  27. 請教一下，為什么三級菜單展開時，不能推動下一個一級菜單，而是隱藏在一級菜單后了，完全按您的方法來的

    來自廣東 回復(fù)

    1. 鏈接:https://pan.baidu.com/s/1d2FTZBG0kWqgW-2QZTFqfA 密碼:76dh 源文件地址，可自己檢查下

      來自北京 回復(fù)

  28. 您好，怎么做精細(xì)版的點擊選中的效果，類似tab的那個

    來自上海 回復(fù)

    1. 選中組件之后——屬性——形狀——選中，可以設(shè)置選中狀態(tài)的樣式，或者選中組件之后右鍵——交互樣式，都可以編輯

      來自北京 回復(fù)

  29. 你好，不知道為何，我按照您步驟來，二級菜單和三級菜單中間空著一行。

    來自山東 回復(fù)

    1. 可能是放置三級菜單的位置出現(xiàn)了錯誤，你再檢查下

      來自北京 回復(fù)

    2. ?? 我剛才發(fā)現(xiàn)我這個，如果一級二級三級菜單全打開了，然后點擊一級菜單。二級菜單會收回去，三級菜單還在頁面上顯示……

      來自山東 回復(fù)

    3. 應(yīng)該是動作配置錯了，可見性是【切換】，推動和拉動元件，看步驟2

      來自北京 回復(fù)