![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=1739276121-YrzFJ8qrRr5oLGPFGEuIta7QJJBYqr9O-0-7d52b9d117ae890358f3cf58d1356a89)
图3-26 水平菜单元件
![](https://epubservercos.yuewen.com/6ACC54/15169318705331206/epubprivate/OEBPS/Images/45_02.jpg?sign=1739276121-uJLAQRw1mGXnX9oc56S1BZ0EBoRu4yQH-0-f65d9cb54426b0f1ba303c82233646cf)
图3-27 设置水平菜单元件属性
在该选项卡中,可设置该元件的“鼠标单击时”“获得焦点时”“失去焦点时”“选中改变时”“选中时”“取消选中时”和“载入时”事件,并可通过下方的操作按钮进行操作:“”按钮用于在该列的前方添加菜单项,“
”按钮用于在该列的后方添加菜单项,“
”按钮用于删除菜单项,“
”按钮用于添加子菜单项,选中菜单项直接输入文字可设置菜单项名称,例如通过使用这些操作按钮可设置如图3-28所示的水平菜单。
![](https://epubservercos.yuewen.com/6ACC54/15169318705331206/epubprivate/OEBPS/Images/45_07.jpg?sign=1739276121-4lx4NuKNvB3Vp4aMAnvF36CdbJT6P1LN-0-13869dc0e82a5939d33609d1b158fa63)
图3-28 使用水平菜单元件设置水平菜单
垂直菜单元件用于创建一个多级别的垂直菜单。垂直导航作为导航也很常见。一般用在二级、三级导航菜单中,从“元件库”面板拖动一个垂直菜单元件到“页面设计”面板,如图3-29所示。
选择图3-29的垂直菜单元件的第一行“Item 1”后,可在“检视”面板的“属性”选项卡设置其事件和其余属性信息,并可进行添加菜单项、添加子菜单项和删除子菜单项等操作,并可选中某行后,输入文字信息设置菜单项名称。
![](https://epubservercos.yuewen.com/6ACC54/15169318705331206/epubprivate/OEBPS/Images/45_08.jpg?sign=1739276121-XutMUWTOjhxfTjFHnSVva8zeOmezq9GP-0-14587cb8c53f1743f7b5bf57c8d84725)
图3-29 垂直菜单元件(默认)
例如通过利用“检视”面板的相应操作设置出如图3-30所示的垂直菜单。
水平菜单元件和垂直菜单元件操作起来相对不便,在此仅做功能性的介绍,后续我们实现一级菜单或二级、三级菜单时,采用的是另外的方式实现设计。
![](https://epubservercos.yuewen.com/6ACC54/15169318705331206/epubprivate/OEBPS/Images/46_01.jpg?sign=1739276121-pf93DpUuXwV24S5TRMu5m78sDVIjgGDP-0-90fc512beb6cc40bf6a111b661e4c427)
图3-30 使用垂直菜单元件设置垂直菜单