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