![Axure RP案例教程](https://wfqqreader-1252317822.image.myqcloud.com/cover/18/25212018/b_25212018.jpg)
上QQ阅读APP看本书,新人免费读10天
设备和账号都新为新人
2.水平菜单导航栏的制作过程
使用Axure RP的文本标签、形状、热区、表格等工具均能实现上述导航效果,下面以使用其菜单元件制作导航为例演示制作方法,具体的步骤如下:
步骤1:启动Axure RP pro 7.0,新建项目。元件库面板保持默认,滚动鼠标找到“菜单和表格”分类。拖动一个水平菜单元件到index页面中,如图2-5所示。
![](https://epubservercos.yuewen.com/BD1F9D/13596070703973806/epubprivate/OEBPS/Images/9787566821164_28_1.jpg?sign=1739281217-qZ37f6xZVCaySnDu4O4LccCIHDYovu3f-0-5f9e4dad413ddb86a1c8cf245d0a8a0c)
图2-5 页面插入水平菜单元件
步骤2:拖入的水平菜单默认有三个菜单项,选中最后一个菜单项,在元件属性与样式区切换到属性面板,使用“后方添加菜单项”命令,为水平菜单再添加三个菜单项,如图2-6所示。
![](https://epubservercos.yuewen.com/BD1F9D/13596070703973806/epubprivate/OEBPS/Images/9787566821164_28_2.jpg?sign=1739281217-gFn3vB91NmkyaFgjp4HAPP0i27fUv7XC-0-84f2beefd67cba801baa5cec66599cee)
图2-6 添加菜单项
步骤3:双击菜单项,将六个菜单项显示的文本依次修改为“首页”“学院文化”“开设专业”“招生就业”“校企合作”“校园生活”,如图2-7所示。
![](https://epubservercos.yuewen.com/BD1F9D/13596070703973806/epubprivate/OEBPS/Images/9787566821164_29_1.jpg?sign=1739281217-2Lnik0bdRK8K2T6gyTYN4sona9rbijAn-0-2f036faed468a8d85dd219a73a0c01e3)
图2-7 编辑菜单项文本
步骤4:选中“学院文化”菜单项目,在属性面板中,选择“添加子菜单”命令,为“学院文化”默认添加包含三个菜单项的子菜单;选中“学院文化”子菜单,在属性面板中,选择“后方添加菜单项”命令,为子菜单再添加两个菜单项,如图2-8所示。
![](https://epubservercos.yuewen.com/BD1F9D/13596070703973806/epubprivate/OEBPS/Images/9787566821164_29_2.jpg?sign=1739281217-iVokMskmj58mYe3XZ46SAKPGrvRwpGtx-0-d1ccfc6e40364c95394da328fc4d9781)
图2-8 添加子菜单项
步骤5:选中“首页”菜单项,在样式面板中,将其宽度修改为60,如图2-9所示。
![](https://epubservercos.yuewen.com/BD1F9D/13596070703973806/epubprivate/OEBPS/Images/9787566821164_30_1.jpg?sign=1739281217-gSi5IM0BR0kJkBN6djGb1bfyXLOXoOO4-0-3df9077035996b78ed7b7ba90c4c283c)
图2-9 修改菜单项的宽度
步骤6:选中“首页”菜单项,在交互面板中,点击“创建连接”命令,选择“page1”页面。将菜单项均指向page1,如图2-10、2-11所示。
![](https://epubservercos.yuewen.com/BD1F9D/13596070703973806/epubprivate/OEBPS/Images/9787566821164_30_2.jpg?sign=1739281217-pj91hZ0q9Zr1NaP58cvrh3h6Ss3PwmBK-0-45d5a0099021e8e8ee22610c53471e6e)
图2-10 为菜单项创建超级链接
![](https://epubservercos.yuewen.com/BD1F9D/13596070703973806/epubprivate/OEBPS/Images/9787566821164_31_1.jpg?sign=1739281217-PNlWHfo2tyoOvyXGn8J1qTTsdn9tlxnH-0-7749961f30503764651e414ab92fccec)
图2-11 创建超级链接效果
步骤7:保存项目,按F5快捷键预览菜单效果,如图2-12、2-13所示。
![](https://epubservercos.yuewen.com/BD1F9D/13596070703973806/epubprivate/OEBPS/Images/9787566821164_31_2.jpg?sign=1739281217-gDTzFzoyQlT8vFIejImC5mZaYBaewLOP-0-dfbfe311c02c1130192026c3e62c0c3c)
图2-12 预览效果
![](https://epubservercos.yuewen.com/BD1F9D/13596070703973806/epubprivate/OEBPS/Images/9787566821164_32_1.jpg?sign=1739281217-cv1eL3s5UwGAPkOhhqwYUKDTjLjuFDds-0-d401317d9118e8b646e346df1d36fcba)
图2-13 预览效果