Axure教程：如何制作可伸缩的全局导航？

可伸缩的全局导航可以帮助用户寻找到感兴趣的类目，鼠标在一级分类上悬停，一级分类下的二级和三级分类就会显示出来，结束悬停时，二级和三级分类就会收缩起来。

话不多说，立马开始分享：

首先，我们将导航分为两个区域，A区域是正常情况下显示出来的区域，B区域是鼠标悬停以后显示出来的区域。当鼠标在A区域悬停的时候，A区域背景会变深，同时B区域的内容出现并且可以点击；当鼠标从A和B的非共同边界移出时，A区域颜色回到正常情况下的颜色，同时B区域隐藏。

一、新建A区域动态面板

（1）拖拽一个动态面板部件到页面中，命名为 A1。

（2）将 A1 动态面板 state1 的名称修改为 常态 ，在 常态 状态中拖拽一个与A1面板相同大小的矩形部件（A1常态矩形），颜色自定义。

（3）为 A1 新建一个状态为 变换，同在 变换 状态中添加一个与A1面板相同大小矩形部件（A1变换矩形），颜色比A1常态矩形的颜色深一些。

二、新建B区域动态面板

（1）再拖拽一个动态面板部件到页面中，命名为 B1（B1与A1右上角对齐）。

（2）B1 动态面板 state1 的名称修改为 状态1  ，在 状态1 中拖拽一个与B1面板相同大小的矩形部件（B1矩形），颜色与 A1变换矩形相同。

（3）回到首页中，右击B1面板，将它设置为隐藏。

设置完效果如下：

三、给面板添加事件

（1）找到 A1 面板的 常态 状态中的矩形部件，在这个矩形的 鼠标悬停 事件中，做两个动作：

将B区域的B1面板显示出来；

将A1面板的状态修改为深色背景的变换状态。

（2）为 B1 面板的 状态1 中的矩形部件添加一个鼠标移出事件，做两个动作：①先隐藏B1面板；②再将A1面板的状态恢复为常态。

（3）为 A1 面板的 变换 状态中的矩形部件添加一个鼠标移入事件，做一个动作：将B1设置为可见。

四、添加文字

拖拽一个矩形部件到 A1 常态 状态中，双击输入相应文字并将矩形填色和边框都设置为无。

右击这个矩形，选择交互样式，在鼠标悬停中勾选下划线。

把矩形的外尺寸调整得跟矩形当中的文字外尺寸差不多，并且在 A1 的常态和变换状态都放上这个矩形。

同理，在 B1 拖拽一个矩形部件到 状态1 中，双击输入相应的文字并将矩形填色和边框都设置为无。（这时你会发现当鼠标悬停在 B1 的文字上时，B1面板会被关闭。这是因为文字是矩形部件，当鼠标进入到 B1 的文字上方是就相当于移出 B1 面板中的 B1 矩形部件，就触发了鼠标移出事件，而这个事件就会关闭B1面板。）

所以我们必须去掉 B1面板 状态1 中鼠标移出事件，另外想办法实现 B1 面板的关闭。

五、设定响应区域

办法是在 A1 的两个状态中的矩形和B1状态中的矩形周围添加一圈响应区域，这个区域的作用就是响应鼠标移出事件，但它们本身是透明的。所以我们用热区部件来实现，利用它既可以添加事件，又透明的特性，并且它有颜色，你可以看见它有利于我们操作。