导航菜单 | Navigation Menu

在本教程中,你将学习如何制作导航菜单,你可以将它添加到多个页面,但是只需要在一个地方作为母版进行编辑。【原型预览】

1、元件和页面设置

创建4个页面

  1. 打开一个新的RP文件。
  2. 页面面板下,缓慢双击Page 1进行重命名,将其命名为“主页”。
  3. 点击页面面板右上角的添加页面图标,再添加3个页面,分别命名为“关于”、“联系”和“帮助”。

为每个页面创建一个按钮

  1. 双击主页将其在画布中打开。
  2. 拖拽4个按钮元件到画布中,并将它们水平对齐。

提示:你可以通过选中它们,然后使用窗口顶部的齐和分布选项,将它们自动对齐并分布排列。

  1. 将按钮上的文字修改为“主页”、“关于”、“联系”和“帮助”,以和页面的名称对应。
2、配置按钮链接
  1. 选中主页按钮,在交互面板中点击单击时,打开链接
  2. 在弹出的下拉列表中选择主页,然后点击确定按钮保存操作。
  3. 对另外3个按钮重复以上步骤,为每个按钮选择对应的页面。

提示:你也可以使用引用页面功能,将导航按钮链接到页面。

3、创建母版并将其添加到其他页面
  1. 全部选中4个按钮,然后在这选中的组合上点击鼠标右键,在弹出的右键菜单中选择转换为母版
  2. 在弹出的对话框中,将母版名称设置为“顶部导航”,然后点击继续按钮。
  3. 这个新的母版将会显示在母版面板的列表中,在母版上点击鼠标右键,然后选择添加到页面中
  4. 在弹出的对话框中,勾选“关于”“联系”“帮助”页面。
  5. 位置下,设置你要放置母版的页面坐标,然后点击确定按钮。

提示:你对母版中任何元件所做的修改,都会体现在母版所在的所有页面上。

4、预览

预览页面,然后点击导航按钮在页面之间进行切换。

其他信息和提示

固定导航

如果你想将导航菜单固定在一个位置,以便在滚动页面时,它不会随页面滚动。那么就将导航菜单放到动态面板中,然后将动态面板固定到浏览器,这种方法可以很方便的制作停靠的页头、页脚和侧边栏。

想要学习如何制作一个不随页面滚动的固定头部,请查看我们的教程:不随页面滚动的固定头部。

评论(0)

发表评论

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