在本教程中,你将学习如何制作导航菜单,你可以将它添加到多个页面,但是只需要在一个地方作为母版进行编辑。【原型预览】
1、元件和页面设置
创建4个页面
- 打开一个新的RP文件。
- 在页面面板下,缓慢双击Page 1进行重命名,将其命名为“主页”。
- 点击页面面板右上角的添加页面图标,再添加3个页面,分别命名为“关于”、“联系”和“帮助”。
为每个页面创建一个按钮
- 双击主页将其在画布中打开。
- 拖拽4个按钮元件到画布中,并将它们水平对齐。
提示:你可以通过选中它们,然后使用窗口顶部的对齐和分布选项,将它们自动对齐并分布排列。
- 将按钮上的文字修改为“主页”、“关于”、“联系”和“帮助”,以和页面的名称对应。
2、配置按钮链接
- 选中主页按钮,在交互面板中点击单击时,打开链接。
- 在弹出的下拉列表中选择主页,然后点击确定按钮保存操作。
- 对另外3个按钮重复以上步骤,为每个按钮选择对应的页面。
提示:你也可以使用引用页面功能,将导航按钮链接到页面。
3、创建母版并将其添加到其他页面
- 全部选中4个按钮,然后在这选中的组合上点击鼠标右键,在弹出的右键菜单中选择转换为母版。
- 在弹出的对话框中,将母版名称设置为“顶部导航”,然后点击继续按钮。
- 这个新的母版将会显示在母版面板的列表中,在母版上点击鼠标右键,然后选择添加到页面中。
- 在弹出的对话框中,勾选“关于”、“联系”和“帮助”页面。
- 在位置下,设置你要放置母版的页面坐标,然后点击确定按钮。
提示:你对母版中任何元件所做的修改,都会体现在母版所在的所有页面上。
4、预览
预览页面,然后点击导航按钮在页面之间进行切换。
其他信息和提示
固定导航
如果你想将导航菜单固定在一个位置,以便在滚动页面时,它不会随页面滚动。那么就将导航菜单放到动态面板中,然后将动态面板固定到浏览器,这种方法可以很方便的制作停靠的页头、页脚和侧边栏。
想要学习如何制作一个不随页面滚动的固定头部,请查看我们的教程:不随页面滚动的固定头部。