3、Axure 8案例：点击按键d出隐藏菜单教程

1、添加元件

2、隐藏菜单分组

3、给按键添加点击事件

4、预览效果

从元件库中拖动元件到画布：添加按键、菜单背景图、三个菜单文本，如下图2画布所示；

1-2、选中“菜单背景图、三个菜单文本”，设为一组；

3、并设置分组名称为“菜单”，设置名称是方便在大量元件中快速查找到我们需要的元件组（这是个好习惯，请注意）；

4-5、勾选“样式”界面的隐藏按键；

1、单击选中按键；

2、在界面右侧边栏选中“PROPERTIES”（属性）；

3、双击add case 下的“OnCLick”，显示时间编辑界面；

4、如下图，点击“Widgets”》“show/hide” ；

5、在右边栏勾选步骤二中命名的“菜单”；

6-7、勾选“Visibility”》“Toggle”（切换效果-在显示与隐藏之间切换），然后完成设置。

点击按钮出d窗，是PC或APP上最基本的交互。我们利用Axure可以快速设计实现该交互。

具体 *** 作：

1. 输入好需要点击按钮后跳出d窗的页面；

2. 拖动控件“动态面板”至页面空白处，点击右键将动态面板“设为隐藏”；

3. 双击“动态面板”，设置该面板名称：d窗，双击State1进入面板编辑页面；

4. 在面板编辑页面配置具体d窗内容（注意将d窗内容配置在输入框内）；

5. 在第一步配好的页面按钮处，添加交互用例——鼠标单击时显示动态面板：d窗；

实现效果：点击按钮，跳出d窗。

6. 在动态面板“确认”按钮处，添加交互用例——鼠标单击时隐藏动态面板：d窗；

实现效果：点击确认按钮，d窗关闭。

7. 在动态面板“取消”按钮处，添加交互用例——鼠标单击时隐藏动态面板：d窗；

实现效果：点击取消按钮，d窗关闭。

6. 最后一步，点击index中动态面板，美化动态面板，置于浏览器中间位置；

整体效果：

---