1月份從實習公司辭職，在秋招的尾巴找到就業(yè)公司，12月份停止了投稿，經(jīng)歷疫情后，不久前公司才安排了入職。時隔半年再次投稿，教大家如何實現(xiàn)下拉選擇菜單項的效果。

實現(xiàn)效果預覽

初始狀態(tài)：

點擊菜單后：

選擇菜單后：

原型預覽地址：https://92wc31.axshare.com

所需元件：三個矩形、一個熱區(qū)、一個動態(tài)面板

總體元件：

動態(tài)面板內(nèi)的元件：

操作步驟

擺放元件

將元件擺放好，其中熱區(qū)放置在顯示領域的矩形和顯示符號的矩形外面。

設置熱區(qū)交互動作—鼠標單擊時

Case1（if菜單項不可見）

Case2（Else if菜單項可見）

設置動態(tài)面板內(nèi)元件的交互動作—鼠標單擊時

每個矩形的交互都是一樣的：

按F5預覽原型效果

思考

在預覽原型時，大家會發(fā)現(xiàn)該原型與其他下拉選擇菜單項的區(qū)別，只能通過點擊熱區(qū)才能將顯示的菜單項隱藏起來。正常情況下，當我們將菜單項顯示出來后，點擊頁面的空白處，菜單項也應該自動隱藏才對。那么需要怎么設置才能實現(xiàn)這種效果？

小記

大家如果有什么不懂的歡迎在評論區(qū)提問和討論~

#相關閱讀#

Axure教程：鼠標移入時切換抽屜風格菜單

Axure教程：鼠標移入時切換菜單

Axure教程：實現(xiàn)菜單下拉效果

Axure教程：抽屜風格的菜單實現(xiàn)

#專欄作家#

Nilz，人人都是產(chǎn)品經(jīng)理專欄作家。關注用戶交互體驗，產(chǎn)品功能設計。擅長原型設計。

本文原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)許可，禁止轉載

題圖來自 Unsplash ，基于 CC0 協(xié)議