之前看到過很多介紹制作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ū)域查看效果，如下圖

可以看出，還有點問題，最后一個二級菜單與相鄰的一級菜單之間為緊靠著的，間距沒有體現(xiàn)出來。所以，我們還要做一步操作，以保證所有菜單都相鄰10像素

3、設置中繼器的間距

單擊中繼器，然后右側選擇中樣式，找到最底下的“間距”設置，如下圖

在“行”后面的輸入框中，填入10 —— 表示行間距為10像素，效果立即就出來了，如下圖

至此，完成了基本素材的所有準備，下面進行交互設置階段

第二階段：設置交互效果

1、設置二級菜單為隱藏 —— 默認情況下二級菜單是未展開的

雙擊中繼器進行入編輯，選中二級菜單（組合），勾選隱藏

選中之后

回到主界面，效果如下圖

已達成所有二級菜單默認收縮的效果

下面就要增加展開的動作

2、展開/收縮二級菜單

預期的效果為：點擊一級菜單，展開/收藏二級菜單

• 二級菜單收縮時，單擊一級菜單，展開二級菜單
• 二級菜單展開時，單擊一級菜單，收縮二級菜單

雙擊中繼器進行入編輯，點擊矩形“一級菜單”，（右側屬性）雙擊“鼠標單擊”

設置動作為：切換“二級菜單（組合）”的可見性為“切換”

至此，交互動作設置完成，點擊F5進入預覽效果，正常的效果如下圖。

第一、第二階段完成之后，2級菜單的基本雛形已經(jīng)有了。

但是所有的一二級菜單數(shù)據(jù)都是一樣的，跟實際情況不符合，故接下來要使用中繼器的特性，給各個菜單的數(shù)據(jù)重新賦值。

第三階段：設置數(shù)據(jù)

1、添加數(shù)據(jù)。

點擊中繼器，右側屬性，給中繼器添加相應數(shù)據(jù)，如下圖

字段說明

no1：一級菜單

no2_1：二級菜單1

no2_2：二級菜單2

no2_3：二級菜單3

2、賦值 —— 給各個矩形賦上相應的值

點擊中繼器，右側屬性，雙擊“每項加載時”，選擇動作“設置文本”，給4個矩形依次賦值，如下圖操作：

回到主操作區(qū)域，看一下，現(xiàn)在的效果，變成了這樣

按下F5，看下預覽效果，如下：

至此，二級菜單基本完成。是不是更簡潔清晰了一些？調整數(shù)據(jù)，或者其他文件中需要使用，是不是更方便一些了？！

最后，附上原型文件地址：https:///s/830988/J1jJNLhlnWdn1ej9 （無密碼）  ，歡迎下載交流！