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

相关推荐

  • 交互设计与用户体验分析实例——外卖产品

    题外话:作为一名交互设计师,平时闲下来特别喜欢分析市场上的一些具有代表性产品的交互设计。同样,作为一名资深的吃货,毋庸置疑,当然先给大家分析几款“外卖”的交互设计。

    2016-10-26
  • 2016你一定要试试这8款原型设计工具

    我们可以轻易的从网上获得各种各样的原型设计工具,例如众人皆知的Axure和新发布的Mockplus。下面为大家推荐8款原型设计工具。

    2016-02-15
  • Axure RP 9 最新版汉化包下载-小楼

    【汉化包下载】Axure RP 9测试版汉化包V1.8版 For 3623下载 【使用方法】 1、将汉化压缩包解压缩。 2、将解压缩后的lang文件夹和dll文件全部复制粘贴到软件安装根目录下。 【Windows系统汉化路径】 以Win7-64位系统…

    Axure 2018-09-18
  • 设计师你的创作工具如何让你的2016充满惊喜?Chapter 1

    IAMUE官方微博正在送书活动:点这里参加 搜@IAMUE 原标题:如何让你的2016充满惊喜?|Chapter 1                                                                                                             …

    交互设计 2016-02-20
  • 跳出思维圈,“类H5”助你市场推广一臂之力

    HTML5,也就是我们常说的H5,它是一种标记语言,主要用于网站的编写和Web App的开发。H5制作的网页可以说是现在网络推广、促销方面的利器。其优点主要体现在两个方面,一是丰富的动效支持,二是查看方便。H5近年来…

    2023-03-03
  • 『旧时好文』别再吐槽12306了,有本事你来写架构

    在平时,12306也就是个正常的电商网站。但一到黄金周,12306就是一个全站所有商品都秒杀,所有SKU都是动态库存的变态。

    IxD案例 2016-08-29
  • 019. 菜单组件——axure线框图部件库介绍

    软件类的教程,我写不出长篇大论,这里面的都是基础的操作,希望初学者,根据一个功能演示,可以自己测试其他功能菜单的效果! Axure自带的菜单组件,我几乎没有用到过,做菜单导航,我第一时间想到的还是矩形组件…

    2014-09-12
  • 设置交互要多久?最快只需三秒!

    原型设计分为两种,一种是静态的线框图,我们一般叫wireframing;另一种是动态的原型,一般叫作prototyping。目前在prototyping设计中涉及到的交互主要分为三种:页链接、交互状态和组件之间的交互。而动态原型的设…

    2023-03-03
  • 移动导航设计详解-交互基础

    在移动端,导航是APP最重要的区别。本文分析了使用频率较高的移动导航设计的应用场景及优劣势,有以下几类: 1. Tab导航 Tab 导航分上下两种。是最常用的导航形式。 很多iOS应用,采用这种导航。比如:istegrame(…

    2014-12-04
  • JUSTINMIND权威指南:开篇-准备工作

    ​ 获取Justinmind安装包 Justinmind 分为免费版本、收费版本(30天试用)Pro版本。 官网提供免费版本可以下载,Pro收费版本不激活可以试用30天,30天过后会限制使用一些高级的功能组件,例如:动态面板(Dynamic Pan…

    2015-08-04