ZeroZ

Axure是什么我就不多说了，我写的这个教程不从使用软件开始教，也不是高深的教程，只是一个平时很常用的效
果。先看一下Demo。

做这个效果最重要的是逻辑要清晰，说白了就一些条件语句，把逻辑理清晰了，自然而然就能做出来，下面开始：

一、首先用矩形工具画一个背景，当然，你用图片来做背景也行，无所谓，这个只是一个修饰作用，表示这块是一个菜单。


二、再画一个没有颜色和边框的矩形，这里先不说明这个矩形的作用，但一定是有用的（这不废话么）。矩形的宽要比整个菜单两边都宽一些，高要比下拉出来最长的菜单高一些。然后把这个矩形锁定住，快捷键是Ctrl+K，以免下面的误操作这个“看不见的矩形”了。

三、在合适的位置写上一级菜单内容。

四、在刚刚写的一级菜单内容上面加一个动态面板，双击此动态面板，修改此动态面板的标签和状态名字。

五、接着选择刚刚修改的面板状态，点击右侧的编辑状态按钮，进入编辑面板状态区域，在这里画上下拉菜单被激活的状态，也就是二级菜单，注意，一级菜单的内容也要画进去。这个面板的内容其实就是鼠标移动到一级菜单上之后显示的内容。

六、回到home页面，之后有几个步骤如下：
1、调整动态面板的位置，使之和后面的一级菜单的内容相重合，也可以在上一步编辑动态面板状态中调整一级菜单的位置；
2、右键点击动态面板，编辑动态面板–设为隐藏，让二级菜单默认隐藏；
3、复制动态面板和一级菜单，分别放至合适的位置（要同时选中动态面板和一级菜单进行复制）；
4、对复制后的动态面板进行重命名，便于以后进行识别；

七、选中第一个一级菜单的内容，然后打开“注解和交互”的操作面板，在“OnMouseEnter”上点右键，添加事件；“OnMouseEnter”其实就是指当鼠标移动到这里时，激活某些事件。

八、之后我们会看到一个“交互事件属性”对话框，因为前面第六步的第2小步，我们已经把动态面板隐藏了，那么，这里，我们需要把他显示出来。选中“显示动态面板”，之后点击下面“Show Panel”的Panel来进行选择面板，选择需要显示的动态面板，点确定。

九、重复七、八步骤，分别应用到其他一级菜单中。

十、最后一步很重要，回忆一下第二步我们是不是画了一个没有颜色和边框的矩形，用处在这里，选中它，并解锁（Ctrl+Shift+K）。之后还是给他添加“OnMouseEnter”事件，这次不是要显示动态面板了，而是要隐藏动态面板，并且选中所有的动态面板。意义就是当鼠标离开动态面板的范围，移动到这个没有颜色和边框的矩形范围内，

隐藏动态面板。如果没有这一步，鼠标移动到其他位置的时候，这个二级菜单是不会隐藏的。

Done！

这是我自己摸索出来的方法，不清楚还有更简单的方法没，欢迎赐教！

乐铺活动验证