當鼠標移入菜單時顯示子菜單，當鼠標移出時子菜單自動隱藏，這樣的交互在制作原型時相信會經(jīng)常用到的一種交互。

如下圖：

頂部導航欄（鼠標移入顯示子欄目，移出隱藏）

線上效果圖，查看：頂部導航欄（鼠標移入顯示，移出隱藏）

制定方法

1. 菜單制作

制作頂部菜單，使用基本元件：文本標簽創(chuàng)建標題，設置標題大小并設置行間距。

菜單制作

2. 子菜單制作

制作子菜單，使用基本元件：動態(tài)面板，并設置動態(tài)面板名稱，進入動態(tài)面板。

子菜單制作

進入動態(tài)面板添加子菜單名稱，可針對每個子菜單添加交互，如跳轉鏈接，鼠標移上去字段交互等。

子菜單制作

3. 菜單交互

回到index頁面，針對一級菜單添加交互，當鼠標移入時顯示菜單一并向下滑動，時間動畫300s。

一級菜單交互

針對二級菜單添加交互，當鼠標移出時隱藏菜單一并向上滑動，時間動畫300s。

子菜單交互

4. 熱區(qū)添加

在菜單邊加上熱區(qū)交互，即可實現(xiàn)上述效果。

熱區(qū)交互

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

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