1. 首页
  2. 教程
  3. 动态面板

【Axure9案例教程】固定顶部导航栏效果,动态面板固定顶部、选项组、交互动作(原型下载)

固定顶部导航栏

导航栏会一直固定在最顶部,当页面内容向下滚动时,导航栏仍然在顶部

【Axure9案例教程】固定顶部导航栏效果,动态面板固定顶部、选项组、交互动作(原型下载)

效果说明

  • 顶部导航栏内容区域宽度为1200px
  • 导航栏宽度全屏显示,根据浏览器的宽度自适应宽度
  • 当浏览器宽度变化时,顶部导航栏的宽度跟随变化,一直适配浏览器的宽度
  • 顶部导航栏底部有阴影效果,可以有效的分隔导航栏与内容区域

涉及知识点

  • 动态面板固定到浏览器,固定在最顶部
  • 选项组的运用,菜单切换效果
  • 元件的交互样式,鼠标悬停时和选中时样式
  • 自适应填充屏幕宽度效果
  • 设置元件尺寸动作
  • 移动元件位置动作
  • 元件阴影分隔

操作要点

1、动态面板固定到浏览器

【Axure9案例教程】固定顶部导航栏效果,动态面板固定顶部、选项组、交互动作(原型下载)

2、阴影分隔

为背景框添加阴影,可以有效的将顶部导航栏与内容区域分隔开来
【Axure9案例教程】固定顶部导航栏效果,动态面板固定顶部、选项组、交互动作(原型下载)

3、自适应效果

因为添加了动态面板固定到浏览器的操作,所以需要其他的交互动作来做自适应效果
需要在页面交互动作中添加“页面载入时”和“窗口尺寸改变时”交互动作,两处交互效果相同
【Axure9案例教程】固定顶部导航栏效果,动态面板固定顶部、选项组、交互动作(原型下载)

移动背景框

X轴:[[-(Window.width-1200)/2]],Y轴:[[LVAR1.y]],LVAR1变量值来源自目标元件(也就是背景框)
【Axure9案例教程】固定顶部导航栏效果,动态面板固定顶部、选项组、交互动作(原型下载)

设置背景框尺寸

宽度:[[Window.width]],高度:72

4、选项组设置

选中需要组成选项组的元件,取一个组名称,就可以将这些元件组合起来了,注意不要和其他选项组名称重复
【Axure9案例教程】固定顶部导航栏效果,动态面板固定顶部、选项组、交互动作(原型下载)

注意

  • 复制时,需要复制页面交互效果,不然会失去宽度的自适应效果
  • 背景框为顶部导航栏的矩形框命名,交互动作需要用到这个矩形框【Axure9案例教程】固定顶部导航栏效果,动态面板固定顶部、选项组、交互动作(原型下载)

原型下载

立即下载

访问密码:8397

原创文章,作者:院长大大,如若转载,请注明出处:http://www.axureschool.cn/822.html

发表评论

邮箱地址不会被公开。 必填项已用*标注

联系我们

在线咨询:点击这里给我发消息

邮件:fleede@163.com

工作时间:周一至周五,9:30-18:30,节假日休息