博客概要
分享利用Axure制作的一个粗糙的下拉菜单~
Axure RP8-实战案例_总目录
文章超链接:https://blog.csdn.net/qq_41386332/article/details/109445644
下拉菜单
![](https://i-blog.csdnimg.cn/blog_migrate/9386addd717f9367a1ef5903868870e8.jpeg)
解释 | 在计算机应用中,下拉菜单是选单的一种表现形式。 具体表现为:当用户选中一个选项后,会向下延伸出具有其他选项的选单。 下拉菜单通常应用于把一些具有相同分类的功能放在同一个下拉中 |
---|---|
效果 | 点击一个菜单时出现的对应列表,即下拉列表 |
【PS】 | 1.此次制作,样式简洁,请自行美化 2.有多种制作方式,此次只制作了其中一种,其余后续分享 |
… | … |
制作过程
1.下拉按钮
![](https://i-blog.csdnimg.cn/blog_migrate/317e359714db450c66c73d6c3b4427b3.jpeg)
这里设置“下拉按钮”,按钮可直接从元件库中拖拽,样式多种可选,亦可自行绘制,点击可修改文本内容。
2.下拉框+下拉文本
![](https://i-blog.csdnimg.cn/blog_migrate/c813ef3cedb44fef68b2f4eaa58af752.jpeg)
![](https://i-blog.csdnimg.cn/blog_migrate/c033103849b623202c03ce9d20f74cc4.jpeg)
与“下拉按钮”同理,拖拽、点击完成“下拉框”、“下拉文本”的设置。
3.隐藏
![](https://i-blog.csdnimg.cn/blog_migrate/ba1e36ab046b1a6162295efe59376f67.jpeg)
![](https://i-blog.csdnimg.cn/blog_migrate/3a2553a2c6690e403f3ef8da4a73c3da.jpeg)
选中“下拉内容”——“下拉框”+“下拉文本”(这里事先把它们Ctrl+G成组),勾选“隐藏”,使之隐藏。
4.设置用例
4.1下拉按钮选择要添加用例
![](https://i-blog.csdnimg.cn/blog_migrate/29a9379a8e042236a2f5a976583b6803.jpeg)
选中“下拉按钮”,在属性栏里选择“添加用例”(这里只选用了“鼠标单击”的用例,其他用例的效果请自行尝试= =),双击其中“鼠标单击时”,后续选择具体用例效果。
4.2用例添加选择
![](https://i-blog.csdnimg.cn/blog_migrate/7d3eb1e5ab63d105a94d88be2f7809d6.jpeg)
承接上步“双击鼠标”,会跳出相应弹窗,在“添加动作”目录下选择“元件”-“显示/隐藏”-“切换可见性”-“确定”,完成用例效果的添加。(这里除了“切换可见性”能实现效果外,还有其他方式,请自行研究= =)
4.3用例添加成功
![](https://i-blog.csdnimg.cn/blog_migrate/96653a1c8b301cd98f0d714ea8519e8d.jpeg)
用例效果添加成功后,属性栏就会产生相应的显示变化。
5.效果展示
![](https://i-blog.csdnimg.cn/blog_migrate/a4de7cf33bd85a18da93588c9f671d07.jpeg)
![](https://i-blog.csdnimg.cn/blog_migrate/db3e3606ef549dbbbf7079553e06d814.jpeg)
点击“下拉按钮”—出现“下拉内容”—完成“下拉菜单”展示。
总结
以上= =“下拉菜单”技能点get~