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