
上QQ阅读APP看本书,新人免费读10天
设备和账号都新为新人
2.水平菜单导航栏的制作过程
使用Axure RP的文本标签、形状、热区、表格等工具均能实现上述导航效果,下面以使用其菜单元件制作导航为例演示制作方法,具体的步骤如下:
步骤1:启动Axure RP pro 7.0,新建项目。元件库面板保持默认,滚动鼠标找到“菜单和表格”分类。拖动一个水平菜单元件到index页面中,如图2-5所示。

图2-5 页面插入水平菜单元件
步骤2:拖入的水平菜单默认有三个菜单项,选中最后一个菜单项,在元件属性与样式区切换到属性面板,使用“后方添加菜单项”命令,为水平菜单再添加三个菜单项,如图2-6所示。

图2-6 添加菜单项
步骤3:双击菜单项,将六个菜单项显示的文本依次修改为“首页”“学院文化”“开设专业”“招生就业”“校企合作”“校园生活”,如图2-7所示。

图2-7 编辑菜单项文本
步骤4:选中“学院文化”菜单项目,在属性面板中,选择“添加子菜单”命令,为“学院文化”默认添加包含三个菜单项的子菜单;选中“学院文化”子菜单,在属性面板中,选择“后方添加菜单项”命令,为子菜单再添加两个菜单项,如图2-8所示。

图2-8 添加子菜单项
步骤5:选中“首页”菜单项,在样式面板中,将其宽度修改为60,如图2-9所示。

图2-9 修改菜单项的宽度
步骤6:选中“首页”菜单项,在交互面板中,点击“创建连接”命令,选择“page1”页面。将菜单项均指向page1,如图2-10、2-11所示。

图2-10 为菜单项创建超级链接

图2-11 创建超级链接效果
步骤7:保存项目,按F5快捷键预览菜单效果,如图2-12、2-13所示。

图2-12 预览效果

图2-13 预览效果