Axure怎么设计多层级菜单下拉联动效果?
我要评论菜单的下拉联动多种多样，多办公软件来说，菜单往往有多个层级，可以下拉联动，通过下拉来显示出子菜单，同时还可以移动其他未展开或已展开的菜单。下面由我来为大家讲解一下我的实现思路，其实非常像做千层饼，而且我是从最内层开始做的。
1、以三个一级菜单为例，我们可以直接先做第三个一级菜单，新建一个一级菜单，起名为第三个一级菜单，同时在它下方建立好三个子菜单，建好后将子菜单全选中后转换为动态面板，并设置隐藏。
2、菜单的联动效果一般是通过点击来触发的，所以，此时对第三个一级菜单添加点击事件，此时需注意：因为点击时可能触发两个动作，所以点击事件需要添加条件进行判断，如：当子菜单面板是隐藏的时候，点击后可显示子菜单；当子菜单是显示的时候，点击后可隐藏子菜单。同时可在事件内加动态效果，如向下显示、向上隐藏，时间暂定500ms；
3、此时第最后一个一级菜单设置完成了，但因为前面的一级菜单需要通过点击，显示其下方的子菜单，同时使第三个一级菜单与其下属子菜单向下移动，所以，我们需要将第三个一级菜单与其子菜单视作一个整体，使他们一同移动，所以，此时需将其设置为一个动态面板；
4、下面我们来做第二个一级菜单，同样的制作原理与步骤与第三个一级菜单与子菜单一致，但需要把刚刚做好的动态面板一并放置在同一页面，以便后续操作；
5、此时对第二个一级菜单做点击事件的添加：当子菜单面板是隐藏的时候，点击后可显示子菜单；当子菜单是显示的时候，点击后可隐藏子菜单。但与前一个一级菜单相比，需多加一个效果，即移动第三个一级菜单的动态面板，移动距离以子菜单的高度*子菜单数量，比如我例子中用的是三个高40的子菜单，则需分别对y坐标移动+/-120;
6、此时可以适当运行一下效果，验证做法是否有误，效果如图，效果正确后，将刚刚所做的所有内容全选，并设置成一个动态面板
7、此时重复第四五步骤，事件添加后发布尝试，可看到效果如图；此时多个菜单面板层层独立，均可通过点击实现下拉显示与收起，且处于其下方的菜单，也会跟着移动，不对有错误的效果出现。
8、最后，调整各个面板的位置，统一对齐后，效果如图，此时就完成了三级菜单下拉显示的效果了
相关推荐：
相关文章
Axure RP 8怎么新建母版面板并管理？Axure中想要统一风格，就可以使用母版来统一格式，该怎么新建母版并编辑呢？下面我们就来看看详细的教程，需要的朋友可以参考下2017-01-11
axure怎么设计鼠标移入移出显示或隐藏面板？axure中想要设计一个动态面板，根据鼠标的移入移出来显示或隐藏面板，下面我们就来看看详细的教程，需要的朋友可以参考下2017-01-11
Axure怎么设计网页的登陆页面？Axure中想要设计一个网页的登陆界面，输入用户名密码，该怎么设置呢？下面我们就来看看详细的教程，需要的朋友可以参考下2017-01-09
Axure RP 8怎么价格2D图形转换成3D图？Axure RP 8中绘制的平面图想转换成3d立体图，该怎么设置呢？下面我们就来看看详细的教程，需要的朋友可以参考下2017-01-06
Axure RP 8设怎么绘制拱桥倒影图？想要制作一个圆拱桥并且设置倒影相互映衬，该怎么绘制呢？下面我们就来看看详细的教程，需要的朋友可以参考下2017-01-06
Axure RP 8怎么利用按钮控制单选框和复选框？Axure中想要设计一个通过按钮来空值单选框和复选框的原型，该怎么制作呢？下面我们就来看看详细的教程，需要的朋友可以参考下2017-01-05
Axure RP 8怎么制作圆形不断变换透明度的效果？Axure RP 8中想要绘制五个大小不同的圆形，中间的圆形可以控制周围圆形的与透明度，该怎么谁及呢？下面我们就来看看详细的教2017-01-05
Axure RP 8怎么给下拉列表框添加多个值？Axure RP 8中想要制作一个下拉列表，有多个数值，该怎么制作呢？下面我们就来Axure给下拉列表框添加多行值的教程，需要的朋友可以2017-01-05
Axure RP 8椭圆形元件怎么设置透明度阴影等属性？Axure RP 8中自带了椭圆形元件，这个元件怎么设置阴影、边框、填充色呢？下面我们就来看看详细的教程，需要的朋友可以参考2017-01-04
Axure RP 8怎么设计内联框架原型？Axure设计网页原型的时候，想要做一个内部嵌套框架或页面，将视频、页面、地图放入框架中，该怎么设计呢？下面我们就来看看详细的教程，2017-01-04
最新评论