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

相关推荐

  • 【Mockplus教程】标尺和参考线

    每个页面都拥有单独的标尺和参考线,可以用于辅助组件的对齐以及尺寸调整。   1. 使用标尺   新建页面之后,在主菜单中选择“显示标尺”即可看到工作区左边和上边显示出 标尺。标尺有两种显示方式:百分比…

    Mockplus 2015-08-31
  • Word产品需求文档,已经过时了-快使用Axure制作产品需求文档

    说来有些惭愧,写这篇文章是用来教大家写需求文档的,但其实,我很少会写传统意义上的产品需求文档,甚至,我连word都很少用。用惯了Axure的任意布局方式,再用word感觉非常别扭,尤其是在添加图片时,简直感到捉急…

    2016-01-06
  • 新书:JUSTINMIND权威指南 作者:阿西UED

    《Justinmind权威指南》是国内第一部专著介绍Justinmind交互式原型设计的技术与技巧,讲述如何从确切的需求和期望出发,用最简单的方法创建易用、有效而且让用户愉悦的原型设计。书中从软件基础组件、工作方式、跨…

    2015-07-31
  • 【Mockplus教程】如何批量修改组件属性

    选择多个组件,在属性面板上面会显示这些组件的共同属性,而属性值为其中一个组件的属性值, 改变属性面板上面的属性后将应用到所有组件上。 以改变文字大小和颜色为例演示如下:

    2015-10-17
  • JustinMind免费版与JustinMind Pro的区别

    justinmind是一个可以免费创建移动和web原型的工具。 justinmind的免费版不仅仅是体验式的,它是永远免费,目的是为一些公司或个人处理小型项目。 在获得永久免费版本之前,你还可以享受我们的30天免费试用专业版带…

    JustinMind 2015-08-25
  • Mockplus演示和分享原型设计的8种方式

    Mockplus目前是国内比较流行的原型设计工具,功能上,相比Axure不算全面和强大,但在不少功能上有它独到之处。Axure有个比较让人头疼的地方,就是对于移动App项目的预览和演示比较麻烦,而这个方面,Mockplus展现了…

    2023-03-03
  • 关于使用Principle的一些小建议

    在日常的设计工作中,难免会遇到一些制作可交互原型的工作。可交互的原型对比于静态原型来说,直观是最大的优点。其次,在研究一些动效的时候,直接调好参数给工程师,会比口述来得更加简单粗暴,效率更好。现在的…

    2016-10-28
  • 朋友圈被天猫双11邀请函刷屏了?我们和它的创作者们聊了聊

    从2008年开始,每年临近11月11日,全国——现在可能是全球——的剁手党们都在等着看马云爸爸和天猫又能玩出什么新花样。今年除了史无前例的整整49张品牌海报以及4个版本的“主题大片”之外,天猫的小伙伴们居然连一封小小…

    2016-10-25
  • 照虎画虎——简单WeUI模板UX设计学习

    艺术虽然分为独立的各个领域,但是总有相通之处。UI/UX设计也是一种艺术,就像美术一样,UI/UX的设计也需要大量的临摹其他优秀作品来提高自己的水平。不过俗话说:“照猫画虎”,如果你临摹的对象不合适,很有可能只…

    2023-03-03
  • 如何用AxureRP做产品的需求管理

    面对众多的产品设计需求,产品设计人员要想一一理清楚就已经是一件不容易的事,更何况要将这些需求清单全部都变成可演示的产品原型。

    2015-01-01