axure中繼器實(shí)現(xiàn)二級(jí)菜單--展開菜單和收縮菜單

實(shí)現(xiàn)步驟:

第一步:實(shí)現(xiàn)菜單的展開和收縮

1、選擇中繼器

選擇中繼器


中繼器

2、編輯中繼器,選用矩形,第一個(gè)矩形,命名為“一級(jí)菜單”,下面的矩形分別命名為“二級(jí)菜單1”、“二級(jí)菜單2”、“二級(jí)菜單3”......(名稱可以自定,明白意思即可)


一級(jí)菜單

3、將二級(jí)菜單組合,組合命名為“二級(jí)菜單”,組合的“樣式”設(shè)置為“隱藏”


設(shè)置二級(jí)菜單

4、選中一級(jí)菜單,選擇“屬性”->“鼠標(biāo)單擊時(shí)”->"切換可見性",切換“二級(jí)菜單”可見性。


切換二級(jí)菜單可見性

至此,可以實(shí)現(xiàn)菜單的展開和收縮。

第二步:設(shè)置菜單值

1、增加中繼器行、列,設(shè)置名稱為“col0”、“col1”、“col2”......


2、設(shè)置一級(jí)菜單的值

選擇“每項(xiàng)載入時(shí)”,設(shè)置“col0”的值為一級(jí)菜單的值

編輯用例->設(shè)置文本->勾選“一級(jí)菜單”->設(shè)置文本值

設(shè)置文本,選擇“一級(jí)菜單”

編輯文本值->插入函數(shù)或變量->選擇“Item.col0”

插入變量或函數(shù)


一級(jí)菜單設(shè)置完成

3、設(shè)置二級(jí)菜單值

與設(shè)置一級(jí)菜單相同,將“二級(jí)菜單1”、“二級(jí)菜單2”、“二級(jí)菜單3”的值設(shè)置為中繼器的col1、col2、col3(如果有更多的二級(jí)菜單項(xiàng)可以增加)

設(shè)置二級(jí)菜單值

得到效果


簡易菜單

5、根據(jù)個(gè)人喜好,設(shè)置菜單樣式

進(jìn)入編輯中繼器,設(shè)置中繼器的矩形的樣式

本例以一級(jí)菜單背景色為淺藍(lán)色,二級(jí)菜單為白色為例

選中一級(jí)菜單矩形,設(shè)置填充顏色和邊框顏色

選中二級(jí)菜單(組合),設(shè)置為“無邊框”

設(shè)置一級(jí)菜單


設(shè)置二級(jí)菜單

效果:

菜單

下一篇:Axure中繼器實(shí)現(xiàn)二級(jí)菜單--隱藏空白菜單項(xiàng) - 簡書

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容