|
Axure教程:頂部導航光標定位當鼠標移入頂部菜單時,菜單頂部有光標跟隨,當移出時,光標自動回到當前頁面菜單位置。這種效果應該怎么實現呢? 當鼠標移入頂部菜單時,菜單頂部有光標跟隨,當移出時,光標自動回到當前頁面菜單位置。這種效果應該怎么實現呢? 如下圖:
頂部導航光標定位 線上效果圖,查看:頂部導航光標定位 制件方法 1. 頁面與導航欄制作 按平時制作導航與頁面的方式制定,先制作好頁面與導航欄。 2. 菜單動態面板 添加動態面板,放在導航欄位置。
菜單動態面板 3. 制作菜單 進入動態面板,添加4個菜單,并添加光標,并放置于菜單一位置。
菜單制作 4. 菜單一交互 針對每個菜單單獨做交互效果,菜單一交互設置。
菜單一交互 在菜單一的交互中添加全局變量”blue”,并設置值為“菜單一”。
變量值設置 5. 菜單二交互 菜單二交互設置:
菜單二交互 在菜單二的交互中添加全局變量“blue”,并設置值為“菜單二”。
變量值設置 其余菜單按以上方法進行設置。 6. 動態面板頁面交互 在動態面板頁面做鼠標移出時的交互效果:
鼠標移出交互 7. 母板 多個菜單頁面,可將制作的菜單轉換為母板,其余3個菜單頁面可直接使用。
母板 8. 主頁面交互設置 在主頁面設置頁面載入時的交互: 頁面載入設置 本文由 @ 五百英里 原創發布于人人都是產品經理。未經許可,禁止轉載 題圖來自Unsplash,基于CC0協議 |