Axure导航栏

导航栏在项目中是一个比较常见的模块，经常用作为功能模块分类的一个菜单。通过鼠标移入或者点击展开当前导航模块的功能列表。
最鲜明的例子就比如Axure软件的菜单栏。

通过鼠标移入或者点击都会展开当前分类，要使用Axure来制作这样一个案例也需要两点：布局和交互用例，下面将通过这个导航栏栏案例来做演示。
导航栏样式布局：
样式布局可以有几种方式，可以直接截图使用图片，再在对应分类上加元件；也可以直接制作一个相同样式（演示使用图片）。
首先将图片截取好，然后添加图片元件将该图片引入其中。

再在每个分类上添加一个矩形元件并将矩形背景色调为透明色（大小适中）。
→ →
看上去就跟没有添加一样，不过是存在有元件的。
接下来就是每个分类所展开的功能菜单，同样的使用事先截好的图片作为代替，将位置调整至每个分类对应合适位置，最终将其功能菜单图片隐藏。
→
该布局大致呈现如下图所示：

导航栏交互用例（事件）：
实现布局后则添加交互用例来实现导航栏效果。
主要效果需要实现鼠标移入可以显示，移除可以隐藏；鼠标点击显示再次点击隐藏。那么要涉及到的操作就有鼠标的移入移出事件以及鼠标点击事件。
每个元件在添加到元件编辑区域时都会有一个默认名称，这个名称不是唯一性的。如果添加多个相同元件，那么它们的名称都会为空。

而通过事件对元件进行操作需要选择到对应元件并设置该元件的执行事件。对于导航栏案例来说会涉及到很多组事件对元件的操作，在选择元件添加交互用例时就难以辨别元件具体是某一个。所以我们可以在元件注释位置给元件设置一个唯一标志的名称。

选择一个事先在导航栏图片上放置在文字对应上方的透明矩形，然后对其设置鼠标移入移出事件。
→
移入移出时会将当前分类所对应的功能列表显示和隐藏，所以在这里必定是涉及到元件的显示和隐藏操作。选中到当前透明矩形，设置移入配置动作勾选对应当前分类的功能列表图片（事先设置好了名称“1”），然后可见性设置为显示，同理移出设置为隐藏，点击确定设置成功。

按照如上操作将剩下的分类选择到对应的功能列表图片进行设置，即该导航栏的移入移出事件设置完成。
同理设置点击事件勾选对应元件设置可见性为切换并设置动画效果，则点击显示，再次点击隐藏操作完成。
→
所实现的效果基本就完成了，不过当鼠标对其执行方法时，在视觉方面上会差一点效果，就是选中样式。按照设计角度来讲可以将该效果设置到鼠标移入移出。

给每一个透明矩形设置一个选中样式，在右侧交互面板中的属性下面找到选中，点击进入设置选中样式设置窗口，勾选填充颜色并设置其颜色（因为是重叠样式，所有颜色需要设置半透明）。
→
最后在先前设置好的移入移出中分别添加用例设置选中，选中状态移入为true移出为false。
→ →

标签：移入,移出,点击,设置,Axure,导航,元件,鼠标
来源： https://blog.csdn.net/weixin_44540247/article/details/111336346