Axure9教程：制作手风琴侧边菜单栏

　　作者给大家分享了如何使用Axure9制作手风琴侧边菜单栏，一起来看看
　　效果图：
　　实现侧边栏这种效果的方法有很多种，比如一级类目和二级类目全部用矩形元件摆列出来，二级类目隐藏，点击一级类目显示对一个的二级类目，隐藏其他的类目。再比如一级类目写死，二级类目用数据库（中继器）来维护，这样二级类目用一个矩形元件就可以了。不管哪种方法，只要能做出效果就行。
　　本次我使用的是双数据库维护，由于Axure无法采用中继器套用中继器，所以一级类目建的还是根据需求，有多少一级类目，就建多少矩形元件。但一级类目和二级类目的显示是通过中继器控制的。
　　一、显示一级类目
　　一级类目所需元件
　　1）拖拽2个矩形（25658）和1个中继器（命名：一级菜单栏数据库）并隐藏至侧边栏区域。注：矩形要按位置放好，中继器位置可随意摆放，因为是隐藏，用户看不到，但为了操不影响操作，我一般会放在侧边栏最下面，操做的时候可以在做完的时候隐藏。
　　2）
　　维护一级类目中继器
　　在中继器中，维护2列信息，ID和Name：ID是用于与矩形匹配，Name用于显示一级类目名。将你想要一级类目名和ID维护到中继器中。（我虽然在中继器中维护了11条记录，但显示我只显示2条，后期你可以在中继器中修改ID和Name来控制）
　　中继器从上到下显示的应该是111，但咱们所需要的名称，故在中继器交互栏的每项加载事件中奖设置文本改为〔〔Item。Name〕〕。
　　中继器交互设置
　　此时中继器显示的就是一级类目的名字：
　　此时效果
　　3）修改矩形元件的名称。由于本次我只需要2个一级菜单：商品管理和系统管理，所以根据中继器里的ID，将矩形元件名改为8和11。（你们也可以将元件名根据从上到下的顺序改成1和2，中继器中商品管理和系统管理ID也改成1和2）
　　4）如何让矩形元件显示中继器中的对应的名字呢？这时我们就需要为矩形元件增加交互来关联。因为我们打开页面的时候，名字已经显示出来了，所以选择的交互事件是载入时。接下来的思路就是，如何从中继器中取信息，由于中继器按照valuekey的方式取数，所以咱们只能用麻烦的办法了。以第一个一级类目商品管理为例：
　　取中继器中所有的数据
　　设置此元件的值中继器的值。由于这是2个元件，所以需要添加局部变量，取元件的值。
　　（注：Axure8用值来表示，Axure9用文本表示；Axure8局部变量的值可以用〔〔局部变量〕〕来表示，但Axure9不行，得用〔〔局部变量。text〕〕来表示，这可能就是值与文本之间的差别）
　　设置交互事件
　　设置局部变量值
　　此时效果
　　由于取到的信息都是一行一行的，咱们需要将其变成一行。同样设置文本，将文本根据空格进行分割。采用的方法是〔〔LVAR。split（‘separator’，limit）〕〕，咱们需要根据回车分割，limit可省略，故方法为〔〔LVAR1。split（‘n’，）〕〕，注：此时是用元件文字来做的局部变量，也可以不添加局部变量〔〔This。text。split（‘n’，）〕〕。
　　设置文本
　　此时效果
　　取自己想要的内容，此时采用的方法是〔〔LVAR。substr（start，length）〕〕（从什么位置开始，取多长）或者〔LVAR。substring（from，to）〕〕（从什么位置到什么位置）。我用的是第二种：〔〔LVAR1。substring（5（LVAR2。name1），5LVAR2。name1）〕〕。
　　注：代码的第一位不是1而是0。由于习惯，本次的一级类目字数都是一样的，故可以利用公式，若不一样的话，就得另想方法。
　　取指定的内容
　　取数思路：从文本可以看出，该文本是由“一级类目，”的形式组合起来的，最后一个“，”可省略。我们可以看成5个字符为1组，第1组数据中心是04，第2组公司管理是59，第3组店面管理是1014
　　我们可以退出第n组应该是5（n1）（5n1），也即是中继器5（ID1）（5ID1），因为咱们矩形元件名字和中继器ID有对应关系，所以也就是5（LVAR2。name1）（5LVAR2。name1）），LVAR。substring（from，to）〕〕是取从局部变量的哪个位置到哪个位置。
　　所以整体公式就是〔〔LVAR1。substring（5（LVAR2。name1），5LVAR2。name1）〕〕
　　此时效果
　　将该交互事件复制一份到第二个矩形文件。
　　此时效果
　　二、显示二级类目
　　（1）添加一动态面板（二级菜单），设置面板样式，自适应内容，在动态面板中添加一个中继器（二级菜单数据库）并隐藏。设置数据库中的矩形尺寸为25640。添加中继器数据Name、fid、page。Name用来显示二级菜单名，fid同一级菜单中继器的ID，用来控制显示内容，page用于打开对应的页面。此处我只添加了商品管理和系统设置的内容。
　　二级菜单中继器内容
　　（2）关联一级类目和二级类目：当我们点击一级类目的时候才会看到二级类目，故交互事件应该时单击时。我们看到的二级菜单栏有2种情况，一种是自己的二级菜单已展开，另一种就是未展开。所以需要做2种情况的判断。
　　展开时：二级菜单可见，且二级菜单的顶部与一级菜单的底部相同
　　判断条件
　　此时点击一级菜单，对应的二级菜单应该收起，故隐藏二级菜单。下方的一级菜单上移，在更多选项中，拉动元件的效果就是二级元件隐藏或收起时，下面的一级菜单会根据二级菜单的大小，修改位置。
　　收起时：非展开时。
　　非展开时也有2种，所有的二级菜单都没展开或者自己的二级菜单没展开，其他的二级菜单展开了。
　　为了统一，先将所有的二级菜单收起并将二级菜单中继器重置（防止其他二级菜单已展开）。添加筛选，将自己想要二级菜单内容从中继器中显示出来也就是一级菜单的ID与二级菜单的fid相同，故fid一级菜单的名字。
　　筛选中继器
　　移动二级菜单，将二级菜单移动到对应的对应的一级菜单栏下。移动到一级菜单的左侧、下方。
　　移动二级菜单
　　显示二级菜单。
　　显示二级菜单
　　此时点击一级菜单显示二级菜单的效果就做出来了，你可以在点击一级菜单的时候设置元件状态为选中，修改颜色
　　此时效果
　　此时我们点击二级菜单的，应该打开对应的页面，只需要在二级菜单数据库中的矩形增加交互事件，点击时打开对应的页面，可以用内联框架，也可以用打开链接。我用的内联框架。如果你觉得二级菜单的背景颜色跟一级菜单颜色一样，你也可以在这里修改下样式。
　　点击二级菜单打开页面
　　设置二级菜单点击后效果。点击后修改背景颜色。再点击其他二级菜单或一级菜单时，恢复颜色。大家肯定都知道是设置选中。但要设置成单选效果就需要点技巧了。首先将二级菜单数据库中的矩形设置下选中状态。
　　设置选中状态
　　其实中继器已经为中继器内的元件提供了单选选项，但是这针对元件组，不针对单的的元件，所以我们需要将矩形元件编成组。修改这个组的名称和选中状态，最重要的还是在选项组内将这个组的名字选中。有组了，可以将打开页面的事件也添加一份。
　　编辑选项组
　　设置数据库中的单选组项。一共2处：选中中继器样式中的适应HTML内容和交互中的隔离列表项之间的单选按钮组。
　　适应HTML内容
　　隔离列表项之间的单选按钮组
　　这样我们就大功告成了。
　　现在效果
　　为了美观，我们可以加上图标和icon，箭头的icon有2中效果，默认向下，展开向上。也就是设置图片的选中状态，选中时的图片为箭头向上的图片。
　　设置图片选中状态
　　将一级菜单栏的各栏进行编组。如图所示
　　一级菜单编组
　　选中状态与二级菜单的显示状态相同。所以可以在一级菜单点击时修改选中状态。
　　增加选中状态
　　这样就完全大功告成了！