![Axure RP 原型设计实践(Web+APP)](https://wfqqreader-1252317822.image.myqcloud.com/cover/788/26688788/b_26688788.jpg)
上QQ阅读APP看书,第一时间看更新
3.3 水平/垂直菜单元件
水平菜单元件用于创建一个多级别的水平菜单。水平菜单一般用于一级导航菜单,从“元件库”面板拖动一个水平菜单元件到“页面设计”面板,如图3-26所示。
选择图3-26的水平菜单元件的第一列“文件”后,可在“检视”面板的“属性”选项卡中对其进行属性设置,如图3-27所示。
![](https://epubservercos.yuewen.com/6ACC54/15169318705331206/epubprivate/OEBPS/Images/45_01.jpg?sign=1739383076-bnjC8QlqqOnDdWtiwkBggKGZ9hz6zyJh-0-8b53bf9154d9305a418a55b71ca84d23)
图3-26 水平菜单元件
![](https://epubservercos.yuewen.com/6ACC54/15169318705331206/epubprivate/OEBPS/Images/45_02.jpg?sign=1739383076-m6jMKklCgQMPF87doPLmWzy8U5Rggaj8-0-90efdbad3e35284d8e95219bc4bf39a0)
图3-27 设置水平菜单元件属性
在该选项卡中,可设置该元件的“鼠标单击时”“获得焦点时”“失去焦点时”“选中改变时”“选中时”“取消选中时”和“载入时”事件,并可通过下方的操作按钮进行操作:“”按钮用于在该列的前方添加菜单项,“
”按钮用于在该列的后方添加菜单项,“
”按钮用于删除菜单项,“
”按钮用于添加子菜单项,选中菜单项直接输入文字可设置菜单项名称,例如通过使用这些操作按钮可设置如图3-28所示的水平菜单。
![](https://epubservercos.yuewen.com/6ACC54/15169318705331206/epubprivate/OEBPS/Images/45_07.jpg?sign=1739383076-h4LxGHBjIpeaqOPhnYsY6iSr7WyD6WAN-0-7dc39a3cab9e56538ffff1f5868c4379)
图3-28 使用水平菜单元件设置水平菜单
垂直菜单元件用于创建一个多级别的垂直菜单。垂直导航作为导航也很常见。一般用在二级、三级导航菜单中,从“元件库”面板拖动一个垂直菜单元件到“页面设计”面板,如图3-29所示。
选择图3-29的垂直菜单元件的第一行“Item 1”后,可在“检视”面板的“属性”选项卡设置其事件和其余属性信息,并可进行添加菜单项、添加子菜单项和删除子菜单项等操作,并可选中某行后,输入文字信息设置菜单项名称。
![](https://epubservercos.yuewen.com/6ACC54/15169318705331206/epubprivate/OEBPS/Images/45_08.jpg?sign=1739383076-1sc6iFaarBUrF93dFolhEuh4ODO35tjm-0-7073367c6960be6a1d2a0c8863320445)
图3-29 垂直菜单元件(默认)
例如通过利用“检视”面板的相应操作设置出如图3-30所示的垂直菜单。
水平菜单元件和垂直菜单元件操作起来相对不便,在此仅做功能性的介绍,后续我们实现一级菜单或二级、三级菜单时,采用的是另外的方式实现设计。
![](https://epubservercos.yuewen.com/6ACC54/15169318705331206/epubprivate/OEBPS/Images/46_01.jpg?sign=1739383076-JWwULuEIO7oFaQrpa9FsxpRqFGBsuZT9-0-8afca9b3e64a83ae06211b2c7b432f4f)
图3-30 使用垂直菜单元件设置垂直菜单