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.

完成后如图：

 

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

第三步：添加相应的动作事件。点击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。

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

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

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