axure 侧滑抽屉式菜单_Axure教程之抽屉菜单

作为刚做产品的小白，我网上查过很多有关抽屉菜单的实现方式，但是都没有说到选中效果的实现，然后我通过同学发我的原型模板，知道了他的实现，现在做下总结。

1、先将整个的背景颜色调为浅灰色，之后拉入一个动态面板，并调整自己想要的大小尺寸，在属性设置中将动态面板设置为自动调整为内容尺寸，然后双击该动态面板，将该动态面板命名为“菜单1”，再添加一个状态，分别命名为收起和展开。

2、点击收起，拉入一个矩形，将尺寸设置为动态面板尺寸后，把矩形命名为“菜单1收起”并设置文字为菜单1，把填充颜色设为白色，拉入一个下拉箭头的图片，调整尺寸，将两个元件进行组合，勾选组合的允许触发鼠标交互。

3、添加“菜单1收起”的鼠标悬停和选中的交互样式，分别把字体颜色为蓝色，填充颜色为浅灰色。

4、为“菜单1收起”添加鼠标点击的用例，将面板状态设置为展开，并选中推动/拉动元件。

5、将“菜单1收起”内容复制到动态面板的展开状态页面，把下拉图片换成上拉，将矩形的名称改为“菜单1展开”，同时将鼠标点击的交互的面板状态设为收起。

6、将“菜单1展开”复制，粘贴一次作为子菜单并对应修改名称和文字为子菜单1(注意复制的时候不要复制到了组合)，修改鼠标的点击用例，选中当前元件。

7、复制粘贴子菜单，然后分别修改对应的名称和文字。

这样整个动态面板的设置就完成拉，这仅仅只是一个菜单，我们可以将该动态面板多复制粘贴几次，这样就能形成多个菜单了。

经过预览，发现还有一个问题——那就是点击一个子菜单之后再点击一个子菜单，发现两个子菜单都是选中状态，这时候我们就需要进行接下来的步骤进行完善他。

8、随便拉入一个原件，将名称命名为辅助且背景填充的透明度改为透明，添加隐藏用例，将所有的子菜单的选中状态都设为未选中。

9、修改所有的子菜单的鼠标点击用例，先隐藏辅助视图，然后再设置当前元件的选中状态，最后显示辅助视图(如果一开始就知道有这一步，可以先添加辅助视图，然后直接在步骤6的时候直接设置对应的用例，就不用后期一个个子菜单进行修改)。

再预览一次，现在就显示没有问题啦。

不过这个还可以再优化一下，就是比如说：我选中了子菜单后，将菜单收起，就看不到对应选中的子菜单在什么位置了，所以在子菜单鼠标点击用例的时候可以将对应所在的“菜单收起”设置为选中，然后再辅助视图的隐藏用例中再添加“菜单收起”的选中状态设为未选中。

这样就彻底完成啦。

本文由 @qiulibi 原创发布于人人都是产品经理。未经许可，禁止转载

题图来自Unsplash，基于CC0协议

给作者打赏，鼓励TA抓紧创作！赞赏

5人打赏

axure 侧滑抽屉式菜单_Axure教程之抽屉菜单相关推荐

axure中的拐弯箭头_Axure教程：实现菜单下拉效果
原标题:Axure教程:实现菜单下拉效果笔者在本文中介绍了如何用Axure实现菜单下拉效果的操作步骤,以及实现过程中的一些心得体会,与大家分享. 尽管Axure的基础元件库里面已经有菜单项了,但是样 ...
axure中图表背影_Axure 教程：动态图表——排名图
之前的文章Axure教程:可视化视图和大家分享了怎样用中继器来制作图表.后来有粉丝问我可不可以用中继器做成动态的图表.所以现在作者就教大家怎么用axure来制作动态图表,今天先来制作排名图. 这个原型 ...
axure rp制作输入法_Axure教程丨制作自己的Axure元件库
接触Axure有一点时间了,每次进行原型设计都需要载入好多个元件库或打开之前做的原型复制元件,不仅浪费时间而且缺少规律,所以决定整理一个自己常用的Axure元件库,以便之后做原型设计时可以快速调取.看 ...
axure中备注线_Axure教程资料
THE START 今天分享的软件教程是--Axure.Axure RP是一款专业的快速原型设计工具. Axure(发音:Ack-sure),代表美国Axure公司:RP则是Rapid Prototy ...
axure如何竖立文字_AXURE教程：中继器实现穿梭框功能
在用Axure的时候,怎么通过中继器实现穿梭框功能呢?本文分享了一个方法. AXURE中的中继器是非常强大的底层组件.我们利用好中继器的强大功能,可以为我们原型设计带来很多便利,今天我们要介绍的是如何 ...
gin-vue-admin菜单配置教程：父子菜单
新建菜单角色管理配置角色对菜单的权限父子菜单点击点我设置按钮自动填充选择父节点ID为刚才创建的测试父子菜单角色管理中取消勾选然后重新勾选一下,不然会有问题. 菜单就挪过去了:
Android 抽屉菜单滑动时模糊背景 | 毛玻璃效果
先来看看要实现的效果图录制的有点模糊在补一张静态图简单的分析一下: 1⃣️一开始我一直以为抽屉菜单的背景是一张半透明的高斯模糊图片,一直尝试着用ps做一张然后发现并没有什么卵用(纯色背景或者图片是 ...
如何使用React Native构建嵌套的抽屉菜单
by Dhruvdutt Jadhav 由Dhruvdutt Jadhav 如何使用React Native构建嵌套的抽屉菜单 (How to build a nested drawer menu w ...
（全程图解）Axure RP8 安装及使用教程
一.Axure下载中文版下载链接:https://pan.baidu.com/s/1dVom8lifgZ-kxtKWbFq-pQ 提取码:p5pc 二.Axure安装及汉化鼠标右击软件压缩包,选择 ...
Flutter 制作一个抽屉菜单
什么是抽屉菜单呢? 其实在APP中,抽屉菜单就是当手指在屏幕横向滑动时候,左边屏幕会滑出或者滑入一个View的东西,就像一个抽屉.下面是我在网上找的一个示例图,和现在正跑在我的模拟器上的目标图. ...

axure 侧滑抽屉式菜单_Axure教程之抽屉菜单

axure 侧滑抽屉式菜单_Axure教程之抽屉菜单相关推荐

最新文章

热门文章