导航菜单 | Navigation Menu

使用母版制作一个在多个页面上显示的导航菜单。

STEP0:下载练习文件

如果你还没有练习文件,请下载Axure Training.rp并在Axure RP中打开它,该文件包含了Axure培训网站上每个教程的对应页面。我们建议你始终使用我们准备好的文件来学完教程,但是如果你无法保证,那也没有关系,我们也会告诉你在不使用Axure Training.rp文件的情况下,如何创建新文件来完成教程。

STEP1:开始

在练习文件中打开“导航菜单”页面。

这个页面包含了几个菜单元件,并且已经设置了“鼠标悬停”和“选中”的交互样式,(查看我们的交互式按钮教程,了解有关交互样式配置的更多信息)。

选中所有元件,点击鼠标右键,然后选择“转换为母版”。

给你的新母版命名为“Header”,并且选择拖放行为为“固定位置”,点击“继续”按钮完成母版的创建。

STEP2:配置导航链接

点击“主页”元件,在属性页签下双加“鼠标单击时”来添加一个新的鼠标单击用例。

在左边“添加动作”栏中,点击“打开链接”动作。

在右边“配置动作”栏中,点击单选按钮“链接到当前项目的某个页面”,然后点击“导航菜单”页面。

点击“确定”按钮关闭对话框。

对导航菜单中的其他三个按钮重复上面的步骤。

STEP3:在每个页面上设置选中的菜单项

打开“导航菜单”页面。

在页面的“检视”窗口中,双击“页面加载时”创建一个新的页面加载用例。

在用例编辑器左边“添加动作”栏中,点击“设置选中”展开动作组,然后选择“选中”动作。

在右边的“配置动作”栏中,点击“Header”母版中的“主页”元件。

点击“确定”按钮关闭对话框。

将“Header”母版添加到“管理”、“概述”、“帮助”页面,然后在每个页面分别重复上述步骤,来设置“管理”、“概述”、“帮助”菜单的选中状态。完成之后,你可以预览一下你的“导航菜单”页面,以确保你所有的链接都能正常工作,并且你设置在菜单上的选中状态也可以正确激活。

STEP4:固定菜单到页面顶部

在母版面板中双击“Header”打开并编辑。

在页面中全选,点击鼠标右键,然后选择“转换为动态面板”。

在属性页签下,点击“固定到浏览器”。

在“固定到浏览器”对话框中,点击“固定到浏览器窗口”的复选框,然后在“水平固定”部分选择“居中”,在“垂直固定”部分选择“上”。

点击“确定”按钮关闭对话框。

STEP5:预览

点击“预览”按钮。

使用导航菜单切换页面,尝试向下滚动一下,你会发现导航菜单仍然保持在原位。

评论(0 个评论)

发表回复

您的电子邮箱地址不会被公开。