![产品经理实用手册:Axure RP原型设计实践(Web+App)](https://wfqqreader-1252317822.image.myqcloud.com/cover/253/44175253/b_44175253.jpg)
上QQ阅读APP看书,第一时间看更新
3.3 水平/垂直菜单元件
水平菜单元件用于创建一个多级别的水平菜单。水平菜单一般用于一级导航菜单,从“元件库”面板拖动一个水平菜单元件到“页面设计”面板,如图3-25所示。
选择图3-25的水平菜单元件的第一列“文件”后,可在“交互”面板中对其进行事件设置,如图3-26所示。
在该选项卡中,可设置该元件的“鼠标单击时”“获得焦点时”“失去焦点时”“选中改变时”“选中时”“取消选中时”和“载入时”事件。选择该水平菜单,右击可进行“编辑菜单填充”“后方添加菜单项”“前方添加菜单项”“删除菜单项”和“添加子菜单”操作。例如通过使用这些操作按钮可设置如图3-27所示的水平菜单。
![](https://epubservercos.yuewen.com/97D9C9/23446276909893206/epubprivate/OEBPS/Images/42_01.jpg?sign=1739397211-YhhyRF7ZFmzPbUre7XbH3VjOqaifrhRe-0-131ec70f79ef40554d97a104f3850897)
图3-25 水平菜单元件
![](https://epubservercos.yuewen.com/97D9C9/23446276909893206/epubprivate/OEBPS/Images/42_02.jpg?sign=1739397211-9Vi2s34nV05mzKqdwy1SSTlvNQXUHMXS-0-5c7f04638f0f49ef45cc1a797a7f4fae)
图3-26 设置水平菜单元件事件
![](https://epubservercos.yuewen.com/97D9C9/23446276909893206/epubprivate/OEBPS/Images/42_03.jpg?sign=1739397211-PoYfd6oIGDmc2nSk64g8M8wSAEps6pc7-0-d0b600b120c0d381cf3ac0fe32d87d2a)
图3-27 使用水平菜单元件设置水平菜单
垂直菜单元件用于创建一个多级别的垂直菜单。垂直菜单一般用在二级、三级导航菜单中,从“元件库”面板拖动一个垂直菜单元件到“页面设计”面板,如图3-28 所示,选择第一行“Item 1”后,可在“交互”面板中设置其事件信息,右击可进行添加菜单项、添加子菜单项和删除子菜单项等操作,并可选中某行后,输入文字信息设置菜单项名称。
![](https://epubservercos.yuewen.com/97D9C9/23446276909893206/epubprivate/OEBPS/Images/42_04.jpg?sign=1739397211-STG4URCNbeBmEtghLf8vOa9ofUBHSWR4-0-8491465d1a57b73a45a5c417e109cfd3)
图3-28 垂直菜单元件(默认)
通过以上相应操作设置可生成如图3-29所示的垂直菜单。
水平菜单元件和垂直菜单元件操作起来相对不便,在此仅做功能性的介绍,后续在实现一级菜单或二级、三级菜单时,采用的是另外的方式实现设计。
![](https://epubservercos.yuewen.com/97D9C9/23446276909893206/epubprivate/OEBPS/Images/42_05.jpg?sign=1739397211-JJjs7AD8Mmmv2nhgOlzVZwyvuI1nSwgZ-0-ea80f491f57fc357c74d7c94d09836d4)
图3-29 使用垂直菜单元件设置垂直菜单