Axure 9 实战案例，动态面板的应用 1，导航栏如何实现100%宽度

前言

Hello！欢迎来到Axure 9 实战案例教程专栏。点击了解课程简介>>

很高兴在Axure案例教程中，与大家一起学习成长，从本次课程开始，我们来学习一下动态面板的应用。

这一节，我们首先来讲解一下，顶部导航栏怎样才能自适应窗口宽度，也就是实现100%宽度。为了节省教学时间，这里提前把导航栏的基本要素设计出来了，下面开始讲解。

导航栏初稿

第一步：设置导航背景为动态面板

在导航背景上点击右键，在弹出菜单中选择“转换为动态面板”。

右键选择转换为动态面板

第二步：设置动态面板为100%宽度

我们再次在导航背景上点击右键，这时候可以看到，弹出菜单上多了一些选项。因为这是动态面板，我们可以对它进行很多设置，这里我们选择100%宽度。

再次右键选择100%宽度

我们按一下F5（或点击发布_预览），先来预览一下，看看实现效果了没，没有变化，说明还差一些步骤。

按F5预览效果，看不出变化

（注：其实这一步已经实现动态面板的100%宽度了，预览时没变化，主要是因为现在的动态面板是无色透明状态，预览时当然看不出来。）

第三步：设置动态面板填充颜色

点击右侧栏样式里的填充，选择一种颜色，给动态面板填充颜色。

点击右侧栏样式里的填充

选择一种颜色

第四步：删除矩形并设置动态面板大小

我们双击动态面板，进入编辑状态，然后按Delete键删除矩形，再关闭编辑状态，回到页面画布。

删除矩形

由于动态面板里没有元件，它自动缩小成10×10的小方块了，我们修改一下它的尺寸，宽度可任意，但高度一定是导航实际的大小。

动态面板无元件时缩小成10×10了

设置高度为100，宽任意

结语

好了，通过前面四步的设置，这下就可以实现动态面板100%宽度了。

完成效果图

---

在线预览

效果图在线预览：https://u.pmdaniu.com/L8A5p

相关课件

为了帮助各位同学，能快速理解和练习Axure案例，本专栏每篇教程都会提供RP格式课件下载。

课件整包链接：
https://item.taobao.com/item.htm?id=631599964711

链接长期有效。

（默林如斯原创出品，未经许可，禁止转载，侵权必究）

《Axure 9 案例教程-基础篇》：以实战案例的角度，讲解Axure 9 的基础操作，帮助大家从案例中学习产品原型的设计思维，带你快速进入实战阶段！！适合Axure入门的同学！！点击了解课程简介>>

欢迎关注《产品经理知识与资源》专栏，这里专注原创Axure实战原型、Axure原型模板、Axure元件库、Axure图标库；2012年入行的原创实力保障！！点击前去关注>>