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”（切换效果-在显示与隐藏之间切换），然后完成设置。

实现步骤：

第一步：实现菜单的展开和收缩

1、选择中继器
2、编辑中继器，选用矩形，第一个矩形，命名为“一级菜单”，下面的矩形分别命名为“二级菜单1”、“二级菜单2”、“二级菜单3”（名称可以自定，明白意思即可）
3、将二级菜单组合，组合命名为“二级菜单”，组合的“样式”设置为“隐藏”
4、选中一级菜单，选择“属性”->“鼠标单击时”->"切换可见性"，切换“二级菜单”可见性。
至此，可以实现菜单的展开和收缩。

第二步：设置菜单值

1、增加中继器行、列，设置名称为“col0”、“col1”、“col2”
2、设置一级菜单的值

选择“每项载入时”，设置“col0”的值为一级菜单的值

编辑用例->设置文本->勾选“一级菜单”->设置文本值

编辑文本值->插入函数或变量->选择“Itemcol0”
3、设置二级菜单值

与设置一级菜单相同，将“二级菜单1”、“二级菜单2”、“二级菜单3”的值设置为中继器的col1、col2、col3（如果有更多的二级菜单项可以增加）

得到效果
5、根据个人喜好，设置菜单样式

进入编辑中继器，设置中继器的矩形的样式

本例以一级菜单背景色为浅蓝色，二级菜单为白色为例

选中一级菜单矩形，设置填充颜色和边框颜色

选中二级菜单（组合），设置为“无边框”
效果：

下一篇： Axure中继器实现二级菜单--隐藏空白菜单项 -

有可能是你给其它的按钮或者元素加了交互，比如你给按钮加了点击后选中复选框，建议你找一找有没有这样的。或者你只把这几个复选框复制出来放在一个新页面，看看预览界面会不会勾选，就能确定是复选框的问题还是其它的问题。
如果实在找不到问题，可以加一个交互，页面载入时把这几个复选框去掉勾选。

今天在做中继器的筛选问题的时候发现一些很细节的东西。觉得应该发出来。让自己加深记忆。也让读者们看到后可以稍稍注意一下。

中继器添加筛选的名称和条件

1、名称就不说了记得在前边加上Filter

2、条件的等号 一定是双等号！一定是双等号！一定是双等号！

3、中继器的移除其他筛选按钮，是确保能够多条件筛选的关键。想清楚再选择勾还不是勾
4、中继器的移除筛选同上。想清楚是否要勾选移除全部。

Axure抽屉效果菜单效果该怎么制作做网页端菜单的抽屉效果很常见，若做原型的时候能快速简单的做出来，可以节省你的宝贵时间，也更能展示你的作品。 1、先建四个动态面板，同时选中这四个面板，在选择组里命名“菜单”;并勾选调整大小以适合内容。 2、双击“菜单-1”动态命板，d出动态命板管理框，点击新增“收缩”“”选项 3、点击收缩，新建菜单栏内容，名称、下拉箭头、底色框;同样，点击，新建后的菜单栏内容，名称、下拉箭头、底色框、子级菜单; 4、当从初始收缩状态点击成状态时，设置鼠标点击用例，面板状态选择到“”，并勾选推拉部件，方向选择下方。 5、当从收缩状态点击成收缩状态时，设置鼠标点击用例，面板状态选择到“收缩”，并勾选推拉部件，方向选择下方。 6、动态面板设置方法同上，即可快速制作出你想要的菜单抽屉效果哦。 注意事项：Axure这里只讲了下拉的效果，没有选中效果哦。

在Axure中可以使用交互动作来设置下拉列表中第一个选项被隐藏。

具体步骤如下：

选中下拉列表控件，点击“交互动作”选项卡。

点击“添加动作”按钮，选择“选中/取消选中”（Select/Unselect）。

在动作设置中，点击“选项列表”（List Items）下的“编辑”按钮。

在d出的“选项列表编辑器”中，选中列表中的第一个选项，然后在“属性编辑器”中勾选“隐藏”（Hidden）选项。

点击“确定”按钮关闭“选项列表编辑器”。

在动作设置中，勾选“选中”（Selected）选项，然后保存交互动作。

这样，第一个选项就可以被隐藏了。需要注意的是，如果需要显示该选项，可以使用相同的方法来取消其隐藏。

---