固定顶部导航栏
导航栏会一直固定在最顶部，当页面内容向下滚动时，导航栏仍然在顶部
效果说明
- 顶部导航栏内容区域宽度为1200px
- 导航栏宽度全屏显示，根据浏览器的宽度自适应宽度
- 当浏览器宽度变化时，顶部导航栏的宽度跟随变化，一直适配浏览器的宽度
- 顶部导航栏底部有阴影效果，可以有效的分隔导航栏与内容区域
涉及知识点
- 动态面板固定到浏览器，固定在最顶部
- 选项组的运用，菜单切换效果
- 元件的交互样式，鼠标悬停时和选中时样式
- 自适应填充屏幕宽度效果
- 设置元件尺寸动作
- 移动元件位置动作
- 元件阴影分隔
操作要点
1、动态面板固定到浏览器
2、阴影分隔
为背景框添加阴影，可以有效的将顶部导航栏与内容区域分隔开来
3、自适应效果
因为添加了动态面板固定到浏览器的操作，所以需要其他的交互动作来做自适应效果
需要在页面交互动作中添加“页面载入时”和“窗口尺寸改变时”交互动作，两处交互效果相同
移动背景框
X轴：[[-(Window.width-1200)/2]]，Y轴：[[LVAR1.y]]，LVAR1变量值来源自目标元件（也就是背景框）
设置背景框尺寸
宽度：[[Window.width]]，高度：72
4、选项组设置
选中需要组成选项组的元件，取一个组名称，就可以将这些元件组合起来了，注意不要和其他选项组名称重复
注意
- 复制时，需要复制页面交互效果，不然会失去宽度的自适应效果
- 背景框为顶部导航栏的矩形框命名，交互动作需要用到这个矩形框
原型下载
立即下载访问密码：8397
原创文章，作者：院长大大，如若转载，请注明出处：https://www.axureschool.cn/822.html
赞 (3)
院长大大 
微信扫一扫 
支付宝扫一扫
【Axure9基础教程】元件操作之元件隐藏与显示设置
« 上一篇
2021年3月8日 pm2:08
【Axure9基础教程】元件操作之调整元件顺序，置顶、置底、上移一层、下移一层
下一篇 »
2021年3月9日 am10:18
