Axure rp9 学习笔记 2.通过动态面板实现左侧菜单栏推拉

一、实现效果展示 本节主要介绍在产品高保真原型图制作过程中，如何利用Axure创建左侧下拉菜单导航，以更好的帮助产品经理表达产品形态、领导者明确产品设计理念、开发人员迅速开发产品。先上图，展示最终达到的效果： 二、插入动态面板 首先插入一个矩形框，调整尺寸及颜色，输入文字【一级菜单1】，右侧面板名称命名为【一级菜单1】，并点击右键转化为【动态面板】，复制一个并重命名为【一级菜单2】。如下图： 双击【一级菜单1】，进入动态面板管理，将此刻的状态【state1】重命名为【折叠】，如下图：

今天教大家怎么在Axure中制作标签版分级多选下拉列表的原型模版~~~

这里介绍的是MAC上的axure rp 9的隐藏功能左右侧栏的方法 方法一：使用快捷键 隐藏左侧栏：option+command+【 隐藏右侧栏：option+command+】 方法二：使用菜单栏 隐藏左侧栏：视图->功能区->开关左侧功能栏 隐藏右侧栏：视图->功能区->开关右侧功能栏 ...

1 更改页面尺寸，将Auto改为Web，页面布局改为左侧对齐。 页面尺寸和页面布局都会对元件的位置有影响。 拖一个动态面板作为左侧菜单导航栏的整体容器，设置x:0, y:50（这里留出50是给顶部导航使用的）w: 210，双击动态面板进入State1设置填充颜色R: 48 G: 66 B: 86，动态面板只有一个状态State1。 页面载入时设置尺寸，设置高度为：[[Window.height - 50]]，至此左边导航栏的容器算是完成。 双击导航栏容器进入State，拖拽一个矩形作为一级

Axure 动态面板快速实现菜单导航收缩展开一，说明二，效果显示三、操作步骤 一，说明 在PC端管理后台页面，经常会遇到左侧菜单列表导航，通过左侧的菜单点击打开相应的页面。如果左侧的菜单比较多时，我们就需要对菜单进行分类，实现点击父级菜单，子菜单自动收缩或展开，提升用户体验。 二，效果显示 三、操作步骤 ...

1. 设置目标原件时，选择切换，这样就可以实现，当原件展示时，点击自动隐藏，隐藏时自动显示； 2. 展开/收起原件（推动/拉动原件）设置为方向**向下**

Axure 基础详解，下拉菜单的制作，对日常组件的用法、原理以及制作方法的详解。

目前很多B端产品都是基于左侧的导航栏，有研究表明导航栏放在左侧效率更高。那基于Axure怎么能够实现呢，其实只需要动态面板组件就可以搞定。 1.首先，拖入四个矩形组件，如下图所示，第一个矩形取名为一级菜单1。然后将后三个全部选中，右键选择转化为动态面板。取名为二级菜单1。 2.这个动态面板可以预先设置为隐藏。该设置是为了实现在点击一级菜单时才能显示出二级菜单。默认是不展开的效果。 3.接下来设置动画效果，选中一级菜单1组件，右侧选择动作--单击时，显示/隐藏，目标选择二级菜单1，选择切换，同时

将这个效果复制到每个子菜单里，做到这一步时，虽然能鼠标悬浮高亮，点击选中高亮，但会出现点击多个栏目后会同时高亮的情况，此时需要通过设置selection group的方式，让这几个组件只能同时一个被选中，右击组件—selection group，可以命名为主导航菜单选项组，将后续所有菜单里的组件都加到这个组件里。点击页面空白处，在OnPageLoad里设置Show Hide的效果，如下图所示。在箭头处添加互动效果，为方便起见，先将路由列表，网关配置，向导配置几个组件选中，命名为网络配置子菜单，如下图所示。

步骤1：推拽五个矩形，调整尺寸和颜色，分别为一级菜单和二级菜单 步骤2：选中两个二级标题，右键，转换为动态面板。 步骤3：选中二级标题的控制面板，右键，设为隐藏。并给此二级菜单控制面板起名为二级菜单。 步骤4： 选中一级标题1，点击新建交互。选择单机时->显示/隐藏 步骤5：设置交互效果时，选择二级菜单控制面板，选择切换，显示选项选择向下滑动，隐藏选项选择向上滑动。点击更多选项，选择 推动和拉动元件。推动和拉动元件作用：二级菜单展开/收缩时，下面的原件会跟着滑动。.

Axure RP 9 for Mac是一款交互式原型设计神器，使用axure rp9以最佳的方式展示您的作品，优化现代浏览器并为现代工作流程设计。如何利用Axure快速创建动态面板制作左侧下拉菜单导航栏？ 一、插入动态面板 首先插入一个动态面板，并命名为【左侧菜单】。如下图 在动态面板【左侧菜单】中继续插入一个动态面板，命名【网格中心】。在【网格中心】动态面板中复制出两个状态，分别命名为「收起」和「展开」，在收起中插入一级菜单名称，展开中插入一级和二级菜单名称。如下图 二、设置交互 接下来，选择交互方式

实现目标 要实现一个自动滚动的列表，如下图所示： 怎么做呢？ 制作好列表，通过以下两种方法来实现滚动。 两种实现方式： 方式一，一个动态面板+Loaded事件： 直接上代码： 说明： 1、动态面板只有一个状态，数据表放在动态面板中，核心的方法是界面加载的时候，就执行move事件，move事件里面自动滚动列表； 2、务必注意wait方法，因为axure时间中部分时间的执行顺序是并行的，如上图中的Fire Event事件，如果不加wait事件，那么loaded方法一开始就会执..

【Axure RP9】实现登入效验&实现左侧菜单栏跳转各页面

话不多说，直接上手： 1，拖入三个动态模板，分别命名1,2,3。 2，双击打开任意一个动态模板，我以1为例，添加一个模板状态，打开这个状态，加入原菜单以及新的二级菜单。 3，对状态2模板中一级菜单添加点击事件，点击设置当前面板状态为state1，并在动作中勾选推动/拉动原件。 4，退出动态模板，对该模板添加点击事件，点击设置动态模板状态为state2，同上，记得勾选推动/拉动原件，这样一个折叠菜单就配置完成了。 5，效果如下，点击弹出二级菜单，再点击收回，另外两个菜单配置同理.

1.用动态面板制作“一级菜单” 如上图所示，从左侧元件库中拖一个矩形到画布中进行创作一个菜单的按钮。然后根据自己的需求调整按钮的尺寸（如：标示3），再调节按钮的其它颜色、描边等。 根据自己的需要，还可以丰富按钮的样式，我这里为按钮添加了图标和展开的小箭头图标（图标可以到阿里图标库自己去下载），选中按钮的所有元件，Ctrl+G编个组 做好“一级菜单1”后，按住Ctrl键，拖拽向下复制（或者Ctrl+c）一个“子菜单1”（把子菜单提出来，不是组合状态哦）。我们去掉二级菜单的一些图标样式，...

实现效果： 首先，布置页面，将菜单所有的元件组合，组合的名称为"菜单"；同时将“菜单”设置为隐藏； 我们要实现的效果很简单，就是单击“+”时，菜单展开，再次点击菜单收起。也就是说，如果菜单不可见，那么单击“+”时，应该展开菜单；如果菜单已经可见，单击“+”时，收起菜单； 所以，按照这个思路，开始设置“+”的交互。 如图，事件为单击时， 1.添加情形一，在情形一这个条件下，插入动作--显示菜单； 2.添加情形二，在情形二这个条件下，插入动作--隐藏菜单； ...

使用工具：Axure rp9。

利用动态面板，简单制作高保真的树形菜单。 一、先看效果 https://1poppu.axshare.com 二、实现思路 1、菜单无非就是收缩和展开，动态面板有个非常好的属性：fit to content，这个属性的含义是：面板的大小可以根据内容多少而变化； 2、菜单的收缩和展开，可以通过切换面板的状态来实现即可，即每个菜单设置两个状态：收缩和展开两个状态； 3、再利用面板状态...