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

如下圖：

頂部導(dǎo)航欄（鼠標(biāo)移入顯示子欄目，移出隱藏）

線(xiàn)上效果圖，查看：頂部導(dǎo)航欄（鼠標(biāo)移入顯示，移出隱藏）

制定方法

1. 菜單制作

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

菜單制作

2. 子菜單制作

制作子菜單，使用基本元件：動(dòng)態(tài)面板，并設(shè)置動(dòng)態(tài)面板名稱(chēng)，進(jìn)入動(dòng)態(tài)面板。

子菜單制作

進(jìn)入動(dòng)態(tài)面板添加子菜單名稱(chēng)，可針對(duì)每個(gè)子菜單添加交互，如跳轉(zhuǎn)鏈接，鼠標(biāo)移上去字段交互等。

子菜單制作

3. 菜單交互

回到index頁(yè)面，針對(duì)一級(jí)菜單添加交互，當(dāng)鼠標(biāo)移入時(shí)顯示菜單一并向下滑動(dòng)，時(shí)間動(dòng)畫(huà)300s。

一級(jí)菜單交互

針對(duì)二級(jí)菜單添加交互，當(dāng)鼠標(biāo)移出時(shí)隱藏菜單一并向上滑動(dòng)，時(shí)間動(dòng)畫(huà)300s。

子菜單交互

4. 熱區(qū)添加

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

熱區(qū)交互

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

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