作者給大家分享了如何使用Axure 9制作手風琴側邊菜單欄，一起來看看~

效果圖：

實現(xiàn)側邊欄這種效果的方法有很多種，比如一級類目和二級類目全部用矩形元件擺列出來，二級類目隱藏，點擊一級類目顯示對一個的二級類目，隱藏其他的類目。再比如一級類目寫死，二級類目用數(shù)據(jù)庫（中繼器）來維護，這樣二級類目用一個矩形元件就可以了。不管哪種方法，只要能做出效果就行。

本次我使用的是雙數(shù)據(jù)庫維護，由于Axure無法采用中繼器套用中繼器，所以一級類目建的還是根據(jù)需求，有多少一級類目，就建多少矩形元件。但一級類目和二級類目的顯示是通過中繼器控制的。

一、顯示一級類目

一級類目所需元件

1）拖拽2個矩形（256*58）和1個中繼器（命名：一級菜單欄數(shù)據(jù)庫）并隱藏至側邊欄區(qū)域。注：矩形要按位置放好，中繼器位置可隨意擺放，因為是隱藏，用戶看不到，但為了操不影響操作，我一般會放在側邊欄最下面，操做的時候可以在做完的時候隱藏。

2）

維護一級類目中繼器

在中繼器中，維護2列信息，ID和Name：ID是用于與矩形匹配，Name用于顯示一級類目名。將你想要一級類目名和ID維護到中繼器中。（我雖然在中繼器中維護了11條記錄，但顯示我只顯示2條，后期你可以在中繼器中修改ID和Name來控制）

中繼器從上到下顯示的應該是1-11，但咱們所需要的名稱，故在中繼器交互欄的每項加載事件中獎設置文本改為[[Item.Name]]。

中繼器交互設置

此時中繼器顯示的就是一級類目的名字：

此時效果

3）修改矩形元件的名稱。由于本次我只需要2個一級菜單：商品管理和系統(tǒng)管理，所以根據(jù)中繼器里的ID，將矩形元件名改為8和11。（你們也可以將元件名根據(jù)從上到下的順序改成1和2，中繼器中商品管理和系統(tǒng)管理ID也改成1和2）

4）如何讓矩形元件顯示中繼器中的對應的名字呢？這時我們就需要為矩形元件增加交互來關聯(lián)。因為我們打開頁面的時候，名字已經(jīng)顯示出來了，所以選擇的交互事件是載入時。接下來的思路就是，如何從中繼器中取信息，由于中繼器按照value-key的方式取數(shù)，所以咱們只能用麻煩的辦法了。以第一個一級類目商品管理為例：

①取中繼器中所有的數(shù)據(jù)

設置此元件的值=中繼器的值。由于這是2個元件，所以需要添加局部變量，取元件的值。

（注：Axure8用值來表示，Axure9用文本表示；Axure8局部變量的值可以用[[局部變量]]來表示，但Axure9不行，得用[[局部變量.text]]來表示，這可能就是值與文本之間的差別）

設置交互事件

設置局部變量值

此時效果

②由于取到的信息都是一行一行的，咱們需要將其變成一行。同樣設置文本，將文本根據(jù)空格進行分割。采用的方法是[[LVAR.split(‘separator’,limit)]]，咱們需要根據(jù)回車分割，limit可省略，故方法為[[LVAR1.split(‘n’,)]]，注：此時是用元件文字來做的局部變量,也可以不添加局部變量[[This.text.split(‘n’,)]]。

設置文本

此時效果

③取自己想要的內(nèi)容，此時采用的方法是[[LVAR.substr(start,length)]]（從什么位置開始，取多長）或者[LVAR.substring(from,to)]]（從什么位置到什么位置）。我用的是第二種：[[LVAR1.substring(5*(LVAR2.name-1),5*LVAR2.name-1)]]。

注：代碼的第一位不是1而是0。由于習慣，本次的一級類目字數(shù)都是一樣的，故可以利用公式，若不一樣的話，就得另想方法。

取指定的內(nèi)容

取數(shù)思路：從文本可以看出，該文本是由“一級類目，”的形式組合起來的，最后一個“，”可省略。我們可以看成5個字符為1組，第1組數(shù)據(jù)中心是0-4，第2組公司管理是5-9，第3組店面管理是10-14……

我們可以退出第n組應該是5*(n-1)-(5*n-1)，也即是中繼器5*(ID-1)-(5*ID-1)，因為咱們矩形元件名字和中繼器ID有對應關系，所以也就是5*(LVAR2.name-1)-（5*LVAR2.name-1)），LVAR.substring(from,to)]]是取從局部變量的哪個位置到哪個位置。

所以整體公式就是[[LVAR1.substring(5*(LVAR2.name-1),5*LVAR2.name-1)]]

此時效果

將該交互事件復制一份到第二個矩形文件。

此時效果

二、顯示二級類目

（1）添加一動態(tài)面板（二級菜單），設置面板樣式，自適應內(nèi)容，在動態(tài)面板中添加一個中繼器（二級菜單數(shù)據(jù)庫）并隱藏。設置數(shù)據(jù)庫中的矩形尺寸為256*40。添加中繼器數(shù)據(jù)Name、fid、page.Name用來顯示二級菜單名，fid同一級菜單中繼器的ID，用來控制顯示內(nèi)容，page用于打開對應的頁面。此處我只添加了商品管理和系統(tǒng)設置的內(nèi)容。

二級菜單中繼器內(nèi)容

（2）關聯(lián)一級類目和二級類目：當我們點擊一級類目的時候才會看到二級類目，故交互事件應該時單擊時。我們看到的二級菜單欄有2種情況，一種是自己的二級菜單已展開，另一種就是未展開。所以需要做2種情況的判斷。

展開時：二級菜單可見，且二級菜單的頂部與一級菜單的底部相同

判斷條件

此時點擊一級菜單，對應的二級菜單應該收起，故隱藏二級菜單。下方的一級菜單上移，在更多選項中，拉動元件的效果就是二級元件隱藏或收起時，下面的一級菜單會根據(jù)二級菜單的大小，修改位置。

收起時：非展開時。

非展開時也有2種，所有的二級菜單都沒展開或者自己的二級菜單沒展開，其他的二級菜單展開了。

為了統(tǒng)一，先將所有的二級菜單收起并將二級菜單中繼器重置（防止其他二級菜單已展開）。添加篩選，將自己想要二級菜單內(nèi)容從中繼器中顯示出來也就是一級菜單的ID與二級菜單的fid相同，故fid=一級菜單的名字。

篩選中繼器

移動二級菜單，將二級菜單移動到對應的對應的一級菜單欄下。移動到一級菜單的左側、下方。

移動二級菜單

顯示二級菜單。

顯示二級菜單

此時點擊一級菜單顯示二級菜單的效果就做出來了，你可以在點擊一級菜單的時候設置元件狀態(tài)為選中，修改顏色

此時效果

此時我們點擊二級菜單的，應該打開對應的頁面，只需要在二級菜單數(shù)據(jù)庫中的矩形增加交互事件，點擊時打開對應的頁面，可以用內(nèi)聯(lián)框架，也可以用打開鏈接。我用的內(nèi)聯(lián)框架。如果你覺得二級菜單的背景顏色跟一級菜單顏色一樣，你也可以在這里修改下樣式。

點擊二級菜單打開頁面

設置二級菜單點擊后效果。點擊后修改背景顏色。再點擊其他二級菜單或一級菜單時，恢復顏色。大家肯定都知道是設置選中。但要設置成單選效果就需要點技巧了。首先將二級菜單數(shù)據(jù)庫中的矩形設置下選中狀態(tài)。

設置選中狀態(tài)

其實中繼器已經(jīng)為中繼器內(nèi)的元件提供了單選選項，但是這針對元件組，不針對單的的元件，所以我們需要將矩形元件編成組。修改這個組的名稱和選中狀態(tài)，最重要的還是在選項組內(nèi)將這個組的名字選中。有組了，可以將打開頁面的事件也添加一份。

編輯選項組

設置數(shù)據(jù)庫中的單選組項。一共2處：選中中繼器樣式中的適應HTML內(nèi)容和交互中的隔離列表項之間的單選按鈕組。

適應HTML內(nèi)容

隔離列表項之間的單選按鈕組

這樣我們就大功告成了。

現(xiàn)在效果

為了美觀，我們可以加上圖標和icon，箭頭的icon有2中效果，默認向下，展開向上。也就是設置圖片的選中狀態(tài)，選中時的圖片為箭頭向上的圖片。

設置圖片選中狀態(tài)

將一級菜單欄的各欄進行編組。如圖所示

一級菜單編組

選中狀態(tài)與二級菜單的顯示狀態(tài)相同。所以可以在一級菜單點擊時修改選中狀態(tài)。

增加選中狀態(tài)

這樣就完全大功告成了~！

本文由 @Ray 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)作者許可，禁止轉載。

題圖來自Unsplash，基于CC0協(xié)議。