axure 折叠菜单

第一步:拖拽三个”动态面板“空间到制作区,分别命名为MB1、MB2、MB3,属性width:200,height:130。

每个动态面板都设置两个状态,分别为State1、State2。

打开MB1面板的State1状态,在里面添加一个名称为section1的矩形控件,属性width:200,height:30,一个名称为content-section1的矩形控件,属性width:200,height:100。

分别给两个矩形填充颜色。再复制这两个矩形控件到MB1面板的State2状态里。

然后将State1状态里的content-section1设置为隐藏。

同样,MB2、MB3面板的状态State1、State2也这样进行操作,只是不同的是分别命名为section2、section3以及content-section2,content-section3.

完成后如图:

image 
image
第二步:将”动态面板“MB2、MB3网上移动。如图:

image

第三步:添加相应的动作事件。点击MB1的State1状态里的section1,设置其”鼠标单击”事件,该事件的结果为,MB1状态切换到State2,MB2相对于MB1移动y=100。设置动态面板MB2的“移动”事件,该事件的结果为,动态面板MB3跟随MB2移动。之后,点击MB1的State2状态里的section1,设置其“鼠标单击”事件,该事件的结果为,MB1状态切换到State1,MB2相对于于MB1移动y=-100。

第四步:同第三步基本差不多。点击MB2的State1状态里的section2,设置其“鼠标单击”事件,该事件的结果为,MB2状态切换到State2,MB3相对于MB2移动y=100。点击MB2的State2状态里的section2,设置其“鼠标点击”事件,该事件的结果为,MB2状态切换到State1,MB3相对于MB2移动y=-100。

第五步:继续同之前两部差不多。点击MB3的State1状态里的section3,设置其“鼠标单击”事件,该事件的结果为,MB3状态切换到State2。点击MB3的State2状态里的section3,设置其“鼠标单击”事件,该事件的结果为,MB3状态切换到State1。

至此,折叠导航菜单就制作完毕里。如图:

image 
image

该例主要运用到Axure的动态面板及切换、控件的移动事件、控件单击事件。

链接: http://pan.baidu.com/s/1jGsZXv4 密码: ghnf 

原创文章,作者:Smiler李想,如若转载,请注明出处:https://www.iamue.com/2810/

(0)
Smiler李想Smiler李想
上一篇 2015-01-12
下一篇 2015-01-13

相关推荐

  • 【涨姿势】Twitter安卓端体验的全面革新

    手机设计 第一步 我开始设计App所做的第一件事情就是记录一个功能列表作为主要导航,这些功能是由客户所描述的,使用这些功能,我做出了App的基本用户使用流程。然而,在这个项目中上述行为都是不必要的,因为twitt…

    IxD案例 2015-08-27
  • 010.文本面板——axure线框图部件库介绍

    文本部件用于在页面中显示文字,对于文字的格式可以随意的更改,设定不同的字体、尺寸和颜色。 特别注意:文本面板的高度无法直接调整,它的高度是随着字体的大小自动变化的 在6.5版本中,对文本的排版都有2个位置…

    2014-09-12
  • 讯飞输入法 Smartisan 定制版功能交互一览

    #交互学堂# #讯飞输入法# #smartisanOS# 基于 Smartisan OS 的设计语言深度定制了讯飞输入法,界面简洁优雅,还能保留讯飞输入法用户的使用习惯, 识别准确率高达 97% 的讯飞语音,让输入更高效 点击下载   讯飞输入…

    2016-10-31
  • Axure快捷键大全 Axure RP Pro 6.5快捷键

    转载请注明:Axure中文网 » Axure快捷键大全 Axure RP Pro 6.5快捷键

    2015-01-01
  • [Mockplus教程]如何批量导入图片到收藏夹中?

    有项目打开时,定位到“我的收藏”的“图片”选项,在下拉菜单选择“批量导入图片”, 根据提示选择导入图片。 完整演示如下:

    Mockplus 2015-09-18
  • 用什么工具?做什么原型?给谁看?

    我们在日常的软件设计中经常会涉及到原型的设计。设计一个原型,无非就是三个目的:第一个目的是给自己看的,为了方便之后的下一步设计;第二个目的是给开发看,说服开发,完善软件;第三个目的是给客户看,让客户…

    2023-03-03
  • 【IXD案例】国际第一时尚品牌VOGUE-iPhone端案例高保真原型-抽屉效果案例

    本次分享给大家展现依然是高保真效果的原型,上一次展现的是iPad版本的,这次是iPhone端版本的原型,和上次一样,我们依然以国际第一时尚品牌VOGUE为例:iPhone端的效果比iPad更复杂,难度更高,我们要做的是抽屉效…

    2016-02-26
  • Axure手机多屏幕滑动原型案例下载

    网络中有价值的Axure原型案例不多,给客户做的原型或者自己公司内部的几乎没有人愿意共享出来,这很正常。建议刚刚学习Axure的小伙伴儿们不要到找人索要原型,换位思考一下,你付出劳动制作好的成品也不会随意送给…

    2015-01-04
  • Axure新品AxShare App现已发布,快来下载!

    今天阿西收到axure官方的邮件: We're launching the AxShare App 意味着 axure终于朝着APP方向有了实质性的进展,大家今后的作品可以通过这款APP进行预览演示了。可以是Axure不上之前的短板,下面就看这个APP的体…

    2015-05-23
  • 分享两个交互设计作品

    今天跟大家分享的是二两童靴的两个交互设计作品,第一个是平安保险产品配置后台交互设计,第二个是台州银行客户经理移动办公App交互设计,希望大家多多交流。如果你也有好的作品想在我是UE网上展示,可以加学习群15…

    2015-07-02