交互学堂
专注分享专业知识

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 

赞(0) 打赏
未经允许不得转载:IAMUE » axure 折叠菜单

评论 抢沙发

评论前必须登录!

 

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏