當鼠標移入菜單時顯示子菜單，當鼠標移出時子菜單自動隱藏，這樣的交互在製作原型時相信會經常用到的一種交互。
如下圖：
頂部導航欄（鼠標移入顯示子欄目，移出隱藏）
線上效果圖，查看：https://u.pmdaniu.com/KJ8z
制定方法
1. 菜單製作
製作頂部菜單，使用基本元件：文本標籤創建標題，設置標題大小並設置行間距。
菜單製作
2. 子菜單製作
製作子菜單，使用基本元件：動態面板，並設置動態面板名稱，進入動態面板。
子菜單製作
進入動態面板添加子菜單名稱，可針對每個子菜單添加交互，如跳轉鏈接，鼠標移上去字段交互等。
子菜單製作
3. 菜單交互
回到index頁面，針對一級菜單添加交互，當鼠標移入時顯示菜單一併向下滑動，時間動畫300s。
一級菜單交互
針對二級菜單添加交互，當鼠標移出時隱藏菜單一併向上滑動，時間動畫300s。
子菜單交互
4. 熱區添加
在菜單邊加上熱區交互，即可實現上述效果。
熱區交互
題圖來自Unsplash，基於CC0協議
分享到:
閱讀更多 人人都是產品經理 的文章
