快好知 kuaihz

Axure:一分钟制作二级折叠菜单

上一篇文章写的拖动列表,里面用了一些公式计算有朋友说有点复杂了,今天做一个二级折叠菜单,个人认为算是我看到的所有文章里步骤最简单的实现办法了,如有更简单的欢迎交流讨论~

效果如下:

步骤如下:

(1)准备一二级菜单

画4个矩形,填充一些颜色和文字加以标记,如下图。然后选中二级菜单的三个矩形框(1.1-1.2-1.3)转动态面板命名“2ndPannel”并隐藏,不再附图。

(2)添加事件

矩形框“一级菜单”添加3个事件,分别如下图。然后将矩形框“一级菜单”和2ndPannel一起选中复制2份摆放好,更改一下文字内容,不再附图。

事件1:单击时针对当前元件切换选中状态;

事件2:选中时显示2ndPannel;

事件3:取消选中时隐藏2ndPannel。

(3)设定组合

这是最简单却又是很重要的一步,选中三个矩形框“一级菜单”组合(Ctrl+G)并设置选项组名称“1st”,这时要注意了,有两个输入框的标题同样都是“设置选项组名称:”,第一个输入名字是不能实现我们需求的的,需要拉到底在最后那个输入名字才行,你可以试试看验证一下。

走到这一步,基本上就实现了点击一级菜单出现二级菜单,点击别的一级菜单收起之前展开的二级菜单这样的效果,但是动画是没有的,不需要动画就到此结束了。

(4)添加动画效果

需要回退到第二步修改里面的事件2、事件3,如下图。要说明的是显示之前一定要有个等待,时长与显示动画时长一样,不添加等待会有大片空白出现,你可以试试看验证一下。

二级折叠菜单,你试试看一分钟能否搞定。

本站资源来自互联网,仅供学习,如有侵权,请通知删除,敬请谅解!
搜索建议:折叠  折叠词条  二级  二级词条  菜单  菜单词条  分钟  分钟词条  制作  制作词条  
原型

 如何设计规范的原型图?

首先需要了解交互稿和原型图的联系与区别:按照常规的工作流程,交互设计师最终交付的产物包括任务流程图、信息架构图、页面原型图、页面交互说明、页面流程图,这些都可以...(展开)

原型

 Axure 教程:web网站原型...

分享个人在绘制PC端web网站交互原型中一些设计技巧,enjoy~技巧一:搭建导航框架页面当自己还是一个小白时,开始着手设计web界面时,最容易犯的一个错误就是...(展开)