Axure制作导航栏的展开与收缩教程

大家在制作产品设计的时候，后台管理页面都会有一个左侧和右侧的导航栏，导航栏在一排全部显示就会显得整个页面十分的凌乱，但如果使用导航栏的展开与收缩功能就能很好的分类放置在同一级导航栏下面，这样既能保证页面的美观还能节省更多的时间。下面就一起来跟北极熊素材库的小编一起来学习一番吧。

从三点带大家分析如何使用与制作：

• 使用场景
• 思路分析
• Axure制作

演示效果：https://slegsq.axshare.com

一、使用场景

我们在做一些B端产品项目时，大多的后台管理系统页面多为左侧或顶部放置导航栏，如果导航栏在一侧同时展示会显得比较繁琐，所以，使用导航栏的展开与收缩即可合理的将相关的分类放置同一级导航下，这样既节省了时间又可快速寻找到相应的页面。

二、思路分析

我们需要先思考Axure如何展示导航栏展开与收缩呢？需要满足什么条件呢？是否需要显示隐藏呢？如何划分多级元件进行分开展示呢？

看到这相比大家会想到一个元件：动态面板。

在Axure中动态面板的使用性是非常高的，接下来我将为大家详细介绍如何利用动态面板做出我们想要的导航栏~

三、Axure制作

首先咱们先创建一个矩形，参数设置为 长度：256，高度：54，填充颜色：#001529，并去掉该线宽设置为：0，左侧边距：40，点击右键设置选项组并命名：导航栏（参数可根据自身需要设置）。

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

双击动态面板复制内部面板分别命名为：导航栏一 合并、导航栏一 展开。选择【导航栏一 展开】，再复制三个矩形框内部文字描述为（二级导航栏）（样式可根据自身需要设置）。

以上基础步骤设置完毕后，接下来我们进行交互设置。

选择动态面板内【导航栏一 合并】点击矩形框，交互内容为：单击时-设置面板状态-目标:已有的动态面板、STATE：导航栏一 展开、推动和拉动元件。

选择动态面板内【导航栏一 展开】点击第一个矩形框，交互内容为：单击时-设置面板状态-目标:已有的动态面板、STATE：导航栏一 合并、推动和拉动元件。

选择动态面板内【导航栏一 展开】点击第二个矩形框，交互内容为：单击时-设置选中-当前元件。并分别对下方两个元件设置同样交互。

最后一步：选择已创建的第一个动态面板进行复制两次依次放置下方，查看预览演示就完成啦~

以上就是Axure制作导航栏的展开与收缩教程的全部内容介绍了，关于更多Axure制作微信原型教程信息，欢迎关注北极熊素材库，给你带来最丰富的素材图片和最有用的教程，更多最新资讯。