起點課堂會員權益
職業(yè)體系課特權
線下行業(yè)大會特權
個人IP打造特權
30+門專項技能課
1300+專題課程
12場職場軟技能直播
12場求職輔導直播
12場專業(yè)技能直播
會員專屬社群
榮耀標識Axure中繼器：2級菜單最簡潔的打開方式
之前看到過很多介紹制作2級菜單的文章，大都是制作N個子菜單，隱藏后待適當時機（點擊）再顯示?？纯疵苊苈槁榈碾[藏元件，實在頭大，是否有簡潔一些方法呢？
當然有了！今天就帶大家用中繼器來嘗試完成一個2級菜單，一起來看看~
先看看效果：
第一階段：準備基本素材元件
1、拖拽1個中繼器到主操作區(qū)域
如下圖：
2、雙擊中繼器，進入編輯中繼器內的元件
2-1、刪除默認的矩形
2-2、增加4個矩形
分別為：
- 一級菜單項1個，填入文字：一級菜單。元件命名為一級菜單。
- 二級菜單項3個，填入文字及分別命名為二級菜單1、二級菜單2、二級菜單3。
4個矩形之間的間距設為10像素（練習時可自行調整該值），a、b完成之后的效果如下圖：
樣例矩形的寬高為：300 * 40。
2-3、簡單樣式調整
設置二級菜單的x坐標設置為20，寬度比一級菜單小20像素。同時適當調整一二級菜單的樣式，以示一二級區(qū)別。
調整后的效果如下圖：
樣例一級菜單填充顏色：CCCCCC， 線寬為none，其他地方均為默認設置；二級線段顏色為E4E4E4，其他均為默認設置。
2-4、將二級菜單設置為一個整體
將3個二級菜單矩形組合并命名為“二級菜單”，便于交互時一并展開/收縮（使用隱藏/顯示方法）。
注：也可以將其設置為動態(tài)面板。
此時回到主區(qū)域查看效果，如下圖：
可以看出，還有點問題，最后一個二級菜單與相鄰的一級菜單之間為緊靠著的，間距沒有體現出來。所以，我們還要做一步操作，以保證所有菜單都相鄰10像素。
3、設置中繼器的間距
單擊中繼器，然后右側選擇中樣式，找到最底下的“間距”設置，如下圖：
在“行”后面的輸入框中，填入10 —— 表示行間距為10像素，效果立即就出來了，如下圖：
至此，完成了基本素材的所有準備，下面進行交互設置階段。
第二階段：設置交互效果
1、設置二級菜單為隱藏 —— 默認情況下二級菜單是未展開的
雙擊中繼器進行入編輯，選中二級菜單（組合），勾選隱藏。
選中之后，隱藏效果。
回到主界面，效果如下圖：
已達成所有二級菜單默認收縮的效果，下面添加展開的動作。
2、展開/收縮二級菜單
預期的效果為：點擊一級菜單，展開/收藏二級菜單。
- 二級菜單收縮時，單擊一級菜單，展開二級菜單；
- 二級菜單展開時，單擊一級菜單，收縮二級菜單。
雙擊中繼器進行入編輯，點擊矩形“一級菜單”，（右側屬性）雙擊“鼠標單擊”。
設置動作為：切換“二級菜單（組合）”的可見性為“切換”。
至此，交互動作設置完成，點擊F5進入預覽效果，正常的效果如下圖：
第一、第二階段完成之后，2級菜單的基本雛形已經有了。但是所有的一二級菜單數據都是一樣的，跟實際情況不符合，故接下來要使用中繼器的特性，給各個菜單的數據重新賦值。
第三階段：設置數據
1、添加數據
點擊中繼器，右側屬性，給中繼器添加相應數據，如下圖：
字段說明：
- no1：一級菜單
- no2_1：二級菜單1
- no2_2：二級菜單2
- no2_3：二級菜單3
2、賦值 —— 給各個矩形賦上相應的值
點擊中繼器，右側屬性，雙擊“每項加載時”，選擇動作“設置文本”，給4個矩形依次賦值，如下圖操作：
回到主操作區(qū)域，看一下，現在的效果，變成了這樣。
按下F5，看下預覽效果，如下：
至此，二級菜單基本完成。是不是很簡單？！
最后，附上原型文件下載地址：
https://quqi.com/s/787633/xMkC449Za4eGia6I/38? 無密碼
歡迎下載交流！
相關閱讀
本文由 @牧逸 原創(chuàng)發(fā)布于人人都是產品經理。未經許可，禁止轉載
題圖來自 Pexels，基于 CC0 協(xié)議
?
加載時，若this test……這個怎么設置
第三階段：設置數據，1添加數據這里沒有no1、no2_1，只有Column0（輸入浙江），Column1（輸入杭州），這樣一級菜單是浙江杭州。為啥我的篩選器屬性不一樣呀？我的是rp8
請問，每一個單獨的二級菜單鏈接到單獨頁面，應該怎么操作呢，比如全部二級菜單有9個，分別鏈接到9個不同的頁面，應該怎么設置交互？
用這種做法 每個一級菜單下面都是同樣數目二級菜單是硬傷 滿足不了大部分的實際原型
在這個用戶的基本上，做以下調整
中繼器中的二級菜單-矩形，放N個，這個N大于等于最多二級菜單的數量
例如，A下有3個二級菜單，B有2個，C有10個，則N>=10，這里取10，放10個二級菜單矩形
在每個矩形上面增加一個事件：加載時，若this.test = ” —— 矩形上面無文字，則隱藏該矩形，同時推動下面元件
即可
因為加了間距，樣式上會有點小問題，可自行適當調整
1、如果三個一級菜單下面的二級菜單數量不一樣用你這種方法是做不了的；
2、不同一級菜單下的二級菜單能打開不同的頁面嗎？也就是按你這個設計，9個二級菜單按鈕能打開9個不同的頁面嗎？
第1個問題看樓上的回答
第2個問題：可以，增加相應的屬性 – 鏈接，點擊相應的矩形時，打開相應的鏈接
例如，目前是有三個二級菜單的矩形，則，另外再加三個鏈接屬性
two_1 | two_1_url | two_2 | two_2_url | two_3 | two_3_url |
two_1的點擊事件為，打開地址two_1_url
以此類推
這個鏈接屬性是在什么地方添加呢
如果要點擊不同的二級菜單，有不同的交互效果呢？ 該如何設置？
增加屬性，點擊事件的時候，根據屬性的值（條件判斷）執(zhí)行哪個動作
假如我打開第一個一級菜單，比如“江西”，我再打開第二個一級菜單“浙江”，怎么把第一個“江西”的一級菜單折疊呢，只顯示第二個一級菜單“浙江”。
1、將一級菜單的矩形設置為選項組。進入中繼器，點擊一級菜單對應的矩形，右側屬性中找到選項級，給其隨意命個名（這樣，所以中繼器中的該矩形就形成一個組了）。
2、將點擊事件，改為，點擊是切換選中當前項
3、再增加事件，選中時，顯示隱藏的組件（之前在點擊事件中的，移到這里）
4、增加事件，取消選中時，隱藏組合（之前在點擊事件中的，移到這里）
即可
謝謝
你好，按照上述的方法，打開了江西的二級菜單后，再點擊湖南后，江西的二級菜單還是不隱藏額？
是的，如果要做成點擊湖南之后江西收縮
即，只允許展開一個分類
可以將所有的一級菜單矩形設置為一個選項組 – 通過單選效果達成目的
已經將一級導航設置成選項組了，然后將一級導航的單擊時事件設為選擇狀態(tài)為toggle了但是還是無法折疊前一個一級導航
但這樣做有一個問題就是，每一個一級菜單下包含的二級菜單數目是相同的，但實際情況中，大多數是不同的啊
是的，可以再加一個動作，當二級菜單的值為空時，隱藏該矩形
請問怎么添加這個動作 當二級菜單的值為空時，隱藏該矩形
在這個用例的基本上，做以下調整
中繼器中的二級菜單-矩形，放N個，這個N大于等于最多二級菜單的數量
例如，A下有3個二級菜單，B有2個，C有10個，則N>=10，這里取10，放10個二級菜單矩形
在每個矩形上面增加一個事件：加載時，若this.test = ” —— 矩形上面無文字，則隱藏該矩形，同時推動下面元件
即可
因為加了間距，樣式上會有點小問題，可自行適當調整
您好，按這篇文章已經做出了效果。這里還是不明白，望大佬能翻牌。A下面有三個二級菜單這段，按上限取10做了，但不買明白如何在矩形上增加事件。是指在這三個數量不同的二級菜單上增加事件么？
每個矩形都添加事件。當沒有文字時隱藏它
“密密麻麻的隱藏元件，實在頭大”這句話很贊同，還以為大神并沒有使用隱藏呢
2級菜單也使用了隱藏，比傳統(tǒng)的方法看上去要簡潔一些。
其實也可以不用隱藏的，使用中繼器的篩選功能 —— 不過這樣的話，就相當于換了一種全新的方式
后續(xù)介紹3菜單時會使用篩選功能實現展開與收縮。
期待
已發(fā)布，地址：http://www.aharts.cn/rp/1456815.html