Question

Axure导航栏的展开与收缩怎么制作？

Answer 1

当我们做一些B端产品项目的时候，大部分后台管理系统的页面都是放在左边或者上面比较多的导航栏，如果导航栏同时在侧边显示比较复杂，那么使用伸缩导航栏可以合理的把相关分类放在同级导航下，这样既节省了时间又能快速找到相应的页面。那么，使用Axure制作导航栏的展开与收缩应该怎么做？下面就来教一教大家！如果此时你心里众多疑惑：Axure去哪学？怎么学？学多久？那不妨学习体验的Axure自学视频课！资深讲师授课，从基础的Axure软件功能到原型绘制到交互案例，综合全面的带你入门Axure产品原型设计！~

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

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

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

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

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

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

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

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

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

以上即是关于“Axure导航栏的展开与收缩怎么制作？”的全部精彩内容分享了，希望能够帮助到你！学习更多Axure原型技巧，不妨阅读更多Axure相关文章学习？如果你想要高效的学习到AXURE原型设计技巧，那么就来，学习体验Axure自学视频课，相信专业全面的知识点能够帮助你快速学习掌握~