作者給大家分享了如何使用Axure 9制作手風琴側邊菜單欄，一起來看看~
作者給大家分享了如何使用Axure 9制作手風琴側邊菜單欄，一起來看看~
效果圖：
實現側邊欄這種效果的方法有很多種，比如一級類目和二級類目全部用矩形元件擺列出來，二級類目隱藏，點擊一級類目顯示對一個的二級類目，隱藏其他的類目。再比如一級類目寫死，二級類目用數據庫（中繼器）來維護，這樣二級類目用一個矩形元件就可以了。不管哪種方法，只要能做出效果就行。
本次我使用的是雙數據庫維護，由于Axure無法采用中繼器套用中繼器，所以一級類目建的還是根據需求，有多少一級類目，就建多少矩形元件。但一級類目和二級類目的顯示是通過中繼器控制的。
一、顯示一級類目
一級類目所需元件
1）拖拽2個矩形（256*58）和1個中繼器（命名：一級菜單欄數據庫）并隱藏至側邊欄區域。注：矩形要按位置放好，中繼器位置可隨意擺放，因為是隱藏，用戶看不到，但為了操不影響操作，我一般會放在側邊欄最下面，操做的時候可以在做完的時候隱藏。
2）
維護一級類目中繼器
在中繼器中，維護2列信息，ID和Name：ID是用于與矩形匹配，Name用于顯示一級類目名。將你想要一級類目名和ID維護到中繼器中。（我雖然在中繼器中維護了11條記錄，但顯示我只顯示2條，后期你可以在中繼器中修改ID和Name來控制）
中繼器從上到下顯示的應該是1-11，但咱們所需要的名稱，故在中繼器交互欄的每項加載事件中獎設置文本改為[[Item.Name]]。
中繼器交互設置
此時中繼器顯示的就是一級類目的名字：
此時效果
3）修改矩形元件的名稱。由于本次我只需要2個一級菜單：商品管理和系統管理，所以根據中繼器里的ID，將矩形元件名改為8和11。（你們也可以將元件名根據從上到下的順序改成1和2，中繼器中商品管理和系統管理ID也改成1和2）
4）如何讓矩形元件顯示中繼器中的對應的名字呢？這時我們就需要為矩形元件增加交互來關聯。因為我們打開頁面的時候，名字已經顯示出來了，所以選擇的交互事件是載入時。接下來的思路就是，如何從中繼器中取信息，由于中繼器按照value-key的方式取數，所以咱們只能用麻煩的辦法了。以第一個一級類目商品管理為例：
①取中繼器中所有的數據
設置此元件的值=中繼器的值。由于這是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.name-1),5*LVAR2.name-1)]]。
注：代碼的第一位不是1而是0。由于習慣，本次的一級類目字數都是一樣的，故可以利用公式，若不一樣的話，就得另想方法。
取指定的內容
取數思路：從文本可以看出，該文本是由“一級類目，”的形式組合起來的，最后一個“，”可省略。我們可以看成5個字符為1組，第1組數據中心是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）添加一動態面板（二級菜單），設置面板樣式，自適應內容，在動態面板中添加一個中繼器（二級菜單數據庫）并隱藏。設置數據庫中的矩形尺寸為256*40。添加中繼器數據Name、fid、page.Name用來顯示二級菜單名，fid同一級菜單中繼器的ID，用來控制顯示內容，page用于打開對應的頁面。此處我只添加了商品管理和系統設置的內容。
二級菜單中繼器內容
（2）關聯一級類目和二級類目：當我們點擊一級類目的時候才會看到二級類目，故交互事件應該時單擊時。我們看到的二級菜單欄有2種情況，一種是自己的二級菜單已展開，另一種就是未展開。所以需要做2種情況的判斷。
展開時：二級菜單可見，且二級菜單的頂部與一級菜單的底部相同
判斷條件
此時點擊一級菜單，對應的二級菜單應該收起，故隱藏二級菜單。下方的一級菜單上移，在更多選項中，拉動元件的效果就是二級元件隱藏或收起時，下面的一級菜單會根據二級菜單的大小，修改位置。
收起時：非展開時。
非展開時也有2種，所有的二級菜單都沒展開或者自己的二級菜單沒展開，其他的二級菜單展開了。
為了統一，先將所有的二級菜單收起并將二級菜單中繼器重置（防止其他二級菜單已展開）。添加篩選，將自己想要二級菜單內容從中繼器中顯示出來也就是一級菜單的ID與二級菜單的fid相同，故fid=一級菜單的名字。
篩選中繼器
移動二級菜單，將二級菜單移動到對應的對應的一級菜單欄下。移動到一級菜單的左側、下方。
移動二級菜單
顯示二級菜單。
顯示二級菜單
此時點擊一級菜單顯示二級菜單的效果就做出來了，你可以在點擊一級菜單的時候設置元件狀態為選中，修改顏色
此時效果
此時我們點擊二級菜單的，應該打開對應的頁面，只需要在二級菜單數據庫中的矩形增加交互事件，點擊時打開對應的頁面，可以用內聯框架，也可以用打開鏈接。我用的內聯框架。如果你覺得二級菜單的背景顏色跟一級菜單顏色一樣，你也可以在這里修改下樣式。
點擊二級菜單打開頁面
設置二級菜單點擊后效果。點擊后修改背景顏色。再點擊其他二級菜單或一級菜單時，恢復顏色。大家肯定都知道是設置選中。但要設置成單選效果就需要點技巧了。首先將二級菜單數據庫中的矩形設置下選中狀態。
設置選中狀態
其實中繼器已經為中繼器內的元件提供了單選選項，但是這針對元件組，不針對單的的元件，所以我們需要將矩形元件編成組。修改這個組的名稱和選中狀態，最重要的還是在選項組內將這個組的名字選中。有組了，可以將打開頁面的事件也添加一份。
編輯選項組
設置數據庫中的單選組項。一共2處：選中中繼器樣式中的適應HTML內容和交互中的隔離列表項之間的單選按鈕組。
適應HTML內容
隔離列表項之間的單選按鈕組
這樣我們就大功告成了。
現在效果
為了美觀，我們可以加上圖標和icon，箭頭的icon有2中效果，默認向下，展開向上。也就是設置圖片的選中狀態，選中時的圖片為箭頭向上的圖片。
設置圖片選中狀態
將一級菜單欄的各欄進行編組。如圖所示
一級菜單編組
選中狀態與二級菜單的顯示狀態相同。所以可以在一級菜單點擊時修改選中狀態。
增加選中狀態
這樣就完全大功告成了~！
本文由 @Ray 原創發布于人人都是產品經理，未經作者許可，禁止轉載。
題圖來自Unsplash，基于CC0協議。
