![f3391b11056297b871a4baec127609cf.png](https://img-blog.csdnimg.cn/img_convert/f3391b11056297b871a4baec127609cf.png)
当鼠标移入顶部菜单时,菜单顶部有光标跟随,当移出时,光标自动回到当前页面菜单位置
如下图:
![bae43dc94310865a591feb1da8a8f216.gif](https://img-blog.csdnimg.cn/img_convert/bae43dc94310865a591feb1da8a8f216.gif)
线上效果图,查看:顶部导航光标定位
制件方法
1、页面与导航栏制作
按平时制作导航与页面的方式制定,先制作好页面与导航栏
2、菜单动态面板
添加动态面板,放在导航栏位置
![60d32f17596bde2695427f609f6ff726.png](https://img-blog.csdnimg.cn/img_convert/60d32f17596bde2695427f609f6ff726.png)
3、制作菜单
进入动态面板,添加4个菜单,并添加光标,并放置于菜单一位置
![5a8cdcc17abcd7e849cd2d6ff0d8ccbf.png](https://img-blog.csdnimg.cn/img_convert/5a8cdcc17abcd7e849cd2d6ff0d8ccbf.png)
4、菜单一交互
针对每个菜单单独做交互效果,菜单一交互设置
![aabad75624039aa44fa980eabfa79c93.png](https://img-blog.csdnimg.cn/img_convert/aabad75624039aa44fa980eabfa79c93.png)
在菜单一的交互中添加全局变量"blue",并设置值为“菜单一”
![d8b9d23e6696f2c9297998e0aa9d5704.png](https://img-blog.csdnimg.cn/img_convert/d8b9d23e6696f2c9297998e0aa9d5704.png)
5、菜单二交互
菜单二交互设置
![b8a00fa56fecc17334268a24d3fc1de1.png](https://img-blog.csdnimg.cn/img_convert/b8a00fa56fecc17334268a24d3fc1de1.png)
在菜单二的交互中添加全局变量"blue",并设置值为“菜单二”
![a14133b47ecc6f5e31e1eeaacbaf8ce9.png](https://img-blog.csdnimg.cn/img_convert/a14133b47ecc6f5e31e1eeaacbaf8ce9.png)
其余菜单按以上方法进行设置
6、动态面板页面交互
在动态面板页面做鼠标移出时的交互效果
![3ee86ca6fbd406cf40427bb0b033deac.png](https://img-blog.csdnimg.cn/img_convert/3ee86ca6fbd406cf40427bb0b033deac.png)
7、母板
多个菜单页面,可将制作的菜单转换为母板,其余3个菜单页面可直接使用
![668b5b25994bf26e7b5a01101ce7bde1.png](https://img-blog.csdnimg.cn/img_convert/668b5b25994bf26e7b5a01101ce7bde1.png)
8、主页面交互设置
在主页面设置页面载入时的交互
![73416d0b9675051fe246777a18eeb990.png](https://img-blog.csdnimg.cn/img_convert/73416d0b9675051fe246777a18eeb990.png)