之前看到過很多介紹制作2級菜單的文章，大都是制作N個子菜單，隱藏后待適當時機（點擊）再顯示。看看密密麻麻的隱藏元件，實在頭大，是否有簡潔一些方法呢？
當然有了！今天就帶大家用中繼器來嘗試完成一個2級菜單，一起來看看~
先看看效果：
第一階段：準備基本素材元件
1、拖拽1個中繼器到主操作區域
如下圖：
2、雙擊中繼器，進入編輯中繼器內的元件
2-1、刪除默認的矩形
2-2、增加4個矩形
分別為：
- 一級菜單項1個，填入文字：一級菜單。元件命名為一級菜單。
- 二級菜單項3個，填入文字及分別命名為二級菜單1、二級菜單2、二級菜單3。
4個矩形之間的間距設為10像素（練習時可自行調整該值），a、b完成之后的效果如下圖：
樣例矩形的寬高為：300 * 40。
2-3、簡單樣式調整
設置二級菜單的x坐標設置為20，寬度比一級菜單小20像素。同時適當調整一二級菜單的樣式，以示一二級區別。
調整后的效果如下圖：
樣例一級菜單填充顏色：CCCCCC， 線寬為none，其他地方均為默認設置；二級線段顏色為E4E4E4，其他均為默認設置。
2-4、將二級菜單設置為一個整體
將3個二級菜單矩形組合并命名為“二級菜單”，便于交互時一并展開/收縮（使用隱藏/顯示方法）。
注：也可以將其設置為動態面板。
此時回到主區域查看效果，如下圖：
可以看出，還有點問題，最后一個二級菜單與相鄰的一級菜單之間為緊靠著的，間距沒有體現出來。所以，我們還要做一步操作，以保證所有菜單都相鄰10像素。
3、設置中繼器的間距
單擊中繼器，然后右側選擇中樣式，找到最底下的“間距”設置，如下圖：
在“行”后面的輸入框中，填入10 —— 表示行間距為10像素，效果立即就出來了，如下圖：
至此，完成了基本素材的所有準備，下面進行交互設置階段。
第二階段：設置交互效果
1、設置二級菜單為隱藏 —— 默認情況下二級菜單是未展開的
雙擊中繼器進行入編輯，選中二級菜單（組合），勾選隱藏。
選中之后，隱藏效果。
回到主界面，效果如下圖：
已達成所有二級菜單默認收縮的效果，下面添加展開的動作。
2、展開/收縮二級菜單
預期的效果為：點擊一級菜單，展開/收藏二級菜單。
- 二級菜單收縮時，單擊一級菜單，展開二級菜單；
- 二級菜單展開時，單擊一級菜單，收縮二級菜單。
雙擊中繼器進行入編輯，點擊矩形“一級菜單”，（右側屬性）雙擊“鼠標單擊”。
設置動作為：切換“二級菜單（組合）”的可見性為“切換”。
至此，交互動作設置完成，點擊F5進入預覽效果，正常的效果如下圖：
第一、第二階段完成之后，2級菜單的基本雛形已經有了。但是所有的一二級菜單數據都是一樣的，跟實際情況不符合，故接下來要使用中繼器的特性，給各個菜單的數據重新賦值。
第三階段：設置數據
1、添加數據
點擊中繼器，右側屬性，給中繼器添加相應數據，如下圖：
字段說明：
- no1：一級菜單
- no2_1：二級菜單1
- no2_2：二級菜單2
- no2_3：二級菜單3
2、賦值 —— 給各個矩形賦上相應的值
點擊中繼器，右側屬性，雙擊“每項加載時”，選擇動作“設置文本”，給4個矩形依次賦值，如下圖操作：
回到主操作區域，看一下，現在的效果，變成了這樣。
按下F5，看下預覽效果，如下：
至此，二級菜單基本完成。是不是很簡單？！
本文為@運營喵原創，運營喵專欄作者。
