Axure怎么设计多层级菜单下拉联动效果？小编教你电脑技术提升篇 _生活百科

【Axure怎么设计多层级菜单下拉联动效果？小编教你电脑技术提升篇】小编在这段时间遇到好多广大网友的咨询，今天免费分享一下关于电脑系统和电脑操作教程的知识大全，这篇文字是关于Axure怎么设计多层级菜单下拉联动效果？小编教你电脑技术提升篇的文字，欢迎大金仔细阅读，如果不懂请多多关注我们网址陆续更新更多更全面的电脑教程。
菜单的下拉联动多种多样，多办公软件来说，菜单往往有多个层级，可以下拉联动，通过下拉来显示出子菜单，同时还可以移动其他未展开或已展开的菜单。下面由我来为大家讲解一下我的实现思路，其实非常像做千层饼，而且我是从最内层开始做的。

文章插图

1、以三个一级菜单为例，我们可以直接先做第三个一级菜单，新建一个一级菜单，起名为第三个一级菜单，同时在它下方建立好三个子菜单，建好后将子菜单全选中后转换为动态面板，并设置隐藏。

文章插图

2、菜单的联动效果一般是通过点击来触发的，所以，此时对第三个一级菜单添加点击事件，此时需注意：因为点击时可能触发两个动作，所以点击事件需要添加条件进行判断，如：当子菜单面板是隐藏的时候，点击后可显示子菜单；当子菜单是显示的时候，点击后可隐藏子菜单。同时可在事件内加动态效果，如向下显示、向上隐藏，时间暂定500ms；

文章插图

文章插图

3、此时第最后一个一级菜单设置完成了，但因为前面的一级菜单需要通过点击，显示其下方的子菜单，同时使第三个一级菜单与其下属子菜单向下移动，所以，我们需要将第三个一级菜单与其子菜单视作一个整体，使他们一同移动，所以，此时需将其设置为一个动态面板；

文章插图

4、下面我们来做第二个一级菜单，同样的制作原理与步骤与第三个一级菜单与子菜单一致，但需要把刚刚做好的动态面板一并放置在同一页面，以便后续操作；

文章插图

5、此时对第二个一级菜单做点击事件的添加：当子菜单面板是隐藏的时候，点击后可显示子菜单；当子菜单是显示的时候，点击后可隐藏子菜单。但与前一个一级菜单相比，需多加一个效果，即移动第三个一级菜单的动态面板，移动距离以子菜单的高度*子菜单数量，比如我例子中用的是三个高40的子菜单，则需分别对y坐标移动+/-120;

文章插图

6、此时可以适当运行一下效果，验证做法是否有误，效果如图，效果正确后，将刚刚所做的所有内容全选，并设置成一个动态面板

文章插图

文章插图

7、此时重复第四五步骤，事件添加后发布尝试，可看到效果如图；此时多个菜单面板层层独立，均可通过点击实现下拉显示与收起，且处于其下方的菜单，也会跟着移动，不对有错误的效果出现。

文章插图

8、最后，调整各个面板的位置，统一对齐后，效果如图，此时就完成了三级菜单下拉显示的效果了

文章插图

以上内容就是关于Axure怎么设计多层级菜单下拉联动效果？小编教你电脑技术提升篇的详细内容，更过关于电脑系统百科的教程请关注我们！