起點(diǎn)課堂會員權(quán)益
職業(yè)體系課特權(quán)
線下行業(yè)大會特權(quán)
個人IP打造特權(quán)
30+門專項技能課
1300+專題課程
12場職場軟技能直播
12場求職輔導(dǎo)直播
12場專業(yè)技能直播
會員專屬社群
榮耀標(biāo)識入門級丨下拉選擇菜單項的實(shí)現(xiàn)
1月份從實(shí)習(xí)公司辭職，在秋招的尾巴找到就業(yè)公司，12月份停止了投稿，經(jīng)歷疫情后，不久前公司才安排了入職。時隔半年再次投稿，教大家如何實(shí)現(xiàn)下拉選擇菜單項的效果。
實(shí)現(xiàn)效果預(yù)覽
初始狀態(tài)：
點(diǎn)擊菜單后：
選擇菜單后：
原型預(yù)覽地址：https://92wc31.axshare.com
所需元件：三個矩形、一個熱區(qū)、一個動態(tài)面板
總體元件：
動態(tài)面板內(nèi)的元件：
操作步驟
擺放元件
將元件擺放好，其中熱區(qū)放置在顯示領(lǐng)域的矩形和顯示符號的矩形外面。
設(shè)置熱區(qū)交互動作—鼠標(biāo)單擊時
Case1（if菜單項不可見）
Case2（Else if菜單項可見）
設(shè)置動態(tài)面板內(nèi)元件的交互動作—鼠標(biāo)單擊時
每個矩形的交互都是一樣的：
按F5預(yù)覽原型效果
思考
在預(yù)覽原型時，大家會發(fā)現(xiàn)該原型與其他下拉選擇菜單項的區(qū)別，只能通過點(diǎn)擊熱區(qū)才能將顯示的菜單項隱藏起來。正常情況下，當(dāng)我們將菜單項顯示出來后，點(diǎn)擊頁面的空白處，菜單項也應(yīng)該自動隱藏才對。那么需要怎么設(shè)置才能實(shí)現(xiàn)這種效果？
小記
大家如果有什么不懂的歡迎在評論區(qū)提問和討論~
#相關(guān)閱讀#
Axure教程：鼠標(biāo)移入時切換抽屜風(fēng)格菜單
Axure教程：抽屜風(fēng)格的菜單實(shí)現(xiàn)
#專欄作家#
Nilz，人人都是產(chǎn)品經(jīng)理專欄作家。關(guān)注用戶交互體驗(yàn)，產(chǎn)品功能設(shè)計。擅長原型設(shè)計。
本文原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)許可，禁止轉(zhuǎn)載
題圖來自 Unsplash ，基于 CC0 協(xié)議
剛剛醒，準(zhǔn)備起床
評論
又復(fù)制了第一個金融業(yè)的矩形 奇跡般的好了 不知道為什么 還有Icon設(shè)置文字=“口”這個 我把這條都刪掉了 也沒有感覺哪里有問題 一樣實(shí)現(xiàn) 想請教一下 Icon這條是啥意思
這個“口”其實(shí)是個符號，是一種叫FontAwesome的字體。在我的文章《Axure教程：使用動態(tài)面板實(shí)現(xiàn)收藏→已收藏》里最后的小記有提到。
為什么我做完以后只有點(diǎn)第一個金融業(yè) 可以 在顯示矩形里顯示金融業(yè) 其他的只顯示[[LVAR1]] 還有設(shè)置文字于Icon=“口 ”中建那個方框是啥意思 望說明下 本人小白一枚
顯示[[LVAR1]]可能是你函數(shù)的使用不對，可以看看我前面的文章《Axure教程：獲取驗(yàn)證碼倒計時的實(shí)現(xiàn)》，對于函數(shù)的使用步驟會比較詳細(xì)一些。