一下如何在Axure中制作导航栏的展开与收缩？

本文主要讲解如何在Axure中扩展和收缩导航栏。

本文主要从三点分析如何使用和制作：

演示效果：

一、使用场景

我们在做一些B端产品项目的时候，大部分后台管理系统页面大多是在左侧或者顶部放置导航栏。如果导航栏同时显示在一侧，会比较麻烦。因此，导航栏的扩展和收缩可以将相关类别合理的放在同级导航下，既节省时间，又能快速找到对应的页面。

二、思维分析

我们需要思考一下 Axure 是如何展示导航栏如何扩展和收缩的？需要满足哪些条件？你需要显示和隐藏它吗？如何划分多级组件单独展示？

看到这个，你会想到一个组件：动态面板。

Axure 中动态面板的可用性非常高。接下来我会详细介绍如何使用动态面板来制作我们想要的导航栏~

三、Axure 制作

首先，我们创建一个矩形，设置参数为长度：256，高度：54导航样式的自定义，填充颜色：#，去掉线宽设置为：0，左边距：40。右击设置选项组并命名为：导航栏（参数可以根据自己的需要设置）。

右键设置交互样式，选择【选择】设置填充样式和字体颜色，设置后保存，右键选择【转换为动态面板】（样式可根据你自己的需要）。

双击动态面板复制内部面板并命名为： Bar 1 Merge， Bar 1 。选择【 Bar 1 】，然后将三个矩形框内的文字描述复制为（ Bar）（样式可以根据自己的需要设置）。

以上基本步骤设置好后，我们就进行交互设置。

在动态面板中选择【导航栏-合并】并点击矩形框，交互内容为：点击-设置面板状态-目标：现有动态面板，状态：导航栏一展开，推拉元素。

在动态面板中选择【展开导航栏】并点击第一个矩形框，交互内容为：点击时-设置面板状态-目标：现有动态面板，状态：导航栏-合并、推拉元素.

在动态面板中选择【导航栏1展开】，点击第二个矩形框，交互内容为：点击-设置选中-当前组件。并为下面的两个组件设置相同的交互。

最后一步：选中第一个创建好的动态面板，复制两次，一个一个放在下面导航样式的自定义，查看预览demo就大功告成了~

希望内容对大家有帮助，会持续更新内容，大家一起学习~

本文最初由@ 发表于大家。产品经理，未经作者许可，禁止转载。

题图来自，基于CC0协议。