當鼠標移入頂部菜單時，菜單頂部有光標跟隨，當移出時，光標自動回到當前頁面菜單位置。這種效果應該怎么實現(xiàn)呢？

  當鼠標移入頂部菜單時，菜單頂部有光標跟隨，當移出時，光標自動回到當前頁面菜單位置。這種效果應該怎么實現(xiàn)呢？

  如下圖：

  頂部導航光標定位

  線上效果圖，查看：頂部導航光標定位

  制件方法 1. 頁面與導航欄制作

  按平時制作導航與頁面的方式制定，先制作好頁面與導航欄。

  2. 菜單動態(tài)面板

  添加動態(tài)面板，放在導航欄位置。

  菜單動態(tài)面板

  3. 制作菜單

  進入動態(tài)面板，添加4個菜單，并添加光標，并放置于菜單一位置。

  菜單制作

  4. 菜單一交互

  針對每個菜單單獨做交互效果，菜單一交互設置。

  菜單一交互

  在菜單一的交互中添加全局變量”blue”，并設置值為“菜單一”。

  變量值設置

  5. 菜單二交互

  菜單二交互設置：

  菜單二交互

  在菜單二的交互中添加全局變量“blue”，并設置值為“菜單二”。

  變量值設置

  其余菜單按以上方法進行設置。

  6. 動態(tài)面板頁面交互

  在動態(tài)面板頁面做鼠標移出時的交互效果：

  鼠標移出交互

  7. 母板

  多個菜單頁面，可將制作的菜單轉換為母板，其余3個菜單頁面可直接使用。

  母板

  8. 主頁面交互設置

  在主頁面設置頁面載入時的交互：

  頁面載入設置

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

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