Axure RP官方教程翻译(4):导航菜单

本篇教程讲解如何利用导航菜单,在多个页面自由跳转,并固定住其位置不受页面滚动影响,涉及到母版功能、添加OnPageLoad实例、动态面板,实现的效果如下:

Axure RP官方教程翻译(4):导航菜单

STEP 0:下载培训文档

如果你还没有培训文档,请点击下载 AxureTraining.rp 文档。这个文档包含了Axure培训网站上每个教程用到的相关页面。我们建议你一直都用我们准备的这个文档来完成教程,但是如果你不用,那也是可以的——即使你没有使用我们的培训文档,我们也总是会告诉你为了完成每一个教程需要在新文件中创建什么。

AxureTraining.rp文档打开后,选择本次练习页面后如下:

Axure RP官方教程翻译(4):导航菜单

 STEP 1:开始

  • 打开培训文档中的“Navigation menu”页面。
  • 这个页面包含几个已经设定好鼠标悬停和选中交互样式的菜单组件(可以查看第一篇译文“ 交互式按钮 ”来学习如何配置交互样式。)

Axure RP官方教程翻译(4):导航菜单

  • 选中顶部所有菜单组件,点击鼠标右键选择“转换成母版”。
  • 将这个母版命名为“Header”并且选择下拉行为(原文:drop behavior,还是你们告诉我怎么翻吧,谢谢)“锁定母版的位置”。
  • 点击“继续”完成创建母版。
  • 双击母版的任何地方可以打开进行编辑。

STEP 2:配置导航链接

  • 点击“Home”组件,双击右侧的属性标签栏中的“OnClick”添加一个OnClick实例。
  • 在对话框左边栏,点击“打开链接”行为。
  • 在对话框右边栏,点击单选框按钮“链接到当前设计的一个页面”,然后选择“Navigation menu”。
  • 点击“确定”关闭对话框。
  • 重复以上步骤对导航菜单中的其他三个按钮进行设置跳转对应的页面,分别是“Manage”,“Profile”,“Help”。

Axure RP官方教程翻译(4):导航菜单

STEP 3:设置每个页面对应的菜单项

  • 打开“Navigation menu”页面(此时不要选择任何层)。
  • 在右侧Page Inspector,双击“OnpageLoad”在实例编辑器中添加一个新的OnPageLoad实例。
  • 点击行为组“Set selected/Checked”来展开它,然后选择“Selected”行为。
  • 在右侧“配置行为”栏,点击处在“Header”母版中的“Home”组件。
  • 点击“确定”关闭对话框。

将母版“Header”(通过拖拽)分别添加到“Manage”,“Profile”,“Help”页面中去。

然后在他们相关的页面重复上面的操作来设置“Manage”,“Profile”,和“Help”这些菜单类目选中后的跳转加载页面。这样做好后,你可能想立刻预览一下你的导航菜单页面以便确认所有的链接是否都起作用,并且选择的状态也能正确的触发。

Axure RP官方教程翻译(4):导航菜单

 SETP 4:将菜单固定在页面顶部

  • 到母版栏双击“Header”进行编辑。
  • 选择当前页面的所有东西,点击鼠标右键,选择“转化成动态面板”。
  • 在右侧属性面板中,点击“固定到浏览器”。
  • 在打开的对话窗口“固定到浏览器”,勾选复选框“固定到浏览器窗口”。然后在水平固定部分选择“居中”以及在垂直固定部分选择“顶部”。
  • 点击“确认”关闭对话框。

Axure RP官方教程翻译(4):导航菜单

STEP 5:预览

点击预览。

使用导航菜单来切换页面,尝试滚动一下屏幕,你会发现导航菜单会固定在原处,不会跟随页面滚动。

本文来自Axure.com,经授权后发布,本文观点不代表产品狗立场,转载请联系原作者。

发表评论

登录后才能评论

This site uses Akismet to reduce spam. Learn how your comment data is processed.

联系我们

 

QR code