????實(shí)現(xiàn)側(cè)邊欄這種效果的方法有很多種，比如一級(jí)類目和二級(jí)類目全部用矩形元件擺列出來(lái)，二級(jí)類目隱藏叼耙，點(diǎn)擊一級(jí)類目顯示對(duì)一個(gè)的二級(jí)類目，隱藏其他的類目掀淘。再比如一級(jí)類目寫(xiě)死，二級(jí)類目用數(shù)據(jù)庫(kù)（中繼器）來(lái)維護(hù)油昂，這樣二級(jí)類目用一個(gè)矩形元件就可以了革娄。不管哪種方法，只要能做出效果就行冕碟。
????本次我使用的是雙數(shù)據(jù)庫(kù)維護(hù)拦惋，由于Axure無(wú)法采用中繼器套用中繼器，所以一級(jí)類目建的還是根據(jù)需求安寺，有多少一級(jí)類目厕妖，就建多少矩形元件。但一級(jí)類目和二級(jí)類目的顯示是通過(guò)中繼器控制的挑庶。
一言秸、顯示一級(jí)類目
? ?1. 拖拽2個(gè)矩形（256*58）和1個(gè)中繼器（命名：一級(jí)菜單欄數(shù)據(jù)庫(kù)）并隱藏至側(cè)邊欄區(qū)域软能。注：矩形要按位置放好，中繼器位置可隨意擺放举畸，因?yàn)槭请[藏查排，用戶看不到，但為了操不影響操作抄沮，我一般會(huì)放在側(cè)邊欄最下面跋核，操做的時(shí)候可以在做完的時(shí)候隱藏。
2.
? ? 在中繼器中叛买，維護(hù)2列信息砂代，ID和Name：ID是用于與矩形匹配，Name用于顯示一級(jí)類目名率挣。將你想要一級(jí)類目名和ID維護(hù)到中繼器中刻伊。（我雖然在中繼器中維護(hù)了11條記錄，但顯示我只顯示2條难礼，后期你可以在中繼器中修改ID和Name來(lái)控制）
????中繼器從上到下顯示的應(yīng)該是1-11娃圆，但咱們所需要的名稱，故在中繼器交互欄的每項(xiàng)加載事件中獎(jiǎng)設(shè)置文本改為[[Item.Name]]蛾茉。
????????此時(shí)中繼器顯示的就是一級(jí)類目的名字讼呢。
????3.修改矩形元件的名稱。由于本次我只需要2個(gè)一級(jí)菜單：商品管理和系統(tǒng)管理谦炬，所以根據(jù)中繼器里的ID悦屏，將矩形元件名改為8和11。（你們也可以將元件名根據(jù)從上到下的順序改成1和2键思，中繼器中商品管理和系統(tǒng)管理ID也改成1和2）
????4.如何讓矩形元件顯示中繼器中的對(duì)應(yīng)的名字呢础爬？這時(shí)我們就需要為矩形元件增加交互來(lái)關(guān)聯(lián)。因?yàn)槲覀兇蜷_(kāi)頁(yè)面的時(shí)候吼鳞，名字已經(jīng)顯示出來(lái)了看蚜，所以選擇的交互事件是載入時(shí)。接下來(lái)的思路就是赔桌，如何從中繼器中取信息供炎，由于中繼器按照value-key的方式取數(shù)，所以咱們只能用麻煩的辦法了疾党。以第一個(gè)一級(jí)類目商品管理為例：
①取中繼器中所有的數(shù)據(jù)
設(shè)置此元件的值=中繼器的值音诫。由于這是2個(gè)元件，所以需要添加局部變量雪位，取元件的值竭钝。
（注：Axure8用值來(lái)表示，Axure9用文本表示；Axure8局部變量的值可以用[[局部變量]]來(lái)表示香罐，但Axure9不行卧波，得用[[局部變量.text]]來(lái)表示，這可能就是值與文本之間的差別）
②由于取到的信息都是一行一行的穴吹，咱們需要將其變成一行幽勒。同樣設(shè)置文本，將文本根據(jù)空格進(jìn)行分割港令。采用的方法是[[LVAR.split('separator',limit)]]啥容，咱們需要根據(jù)回車分割，limit可省略顷霹，故方法為[[LVAR1.split('\n',)]]咪惠，注：此時(shí)是用元件文字來(lái)做的局部變量,也可以不添加局部變量[[This.text.split('\n',)]]。
③取自己想要的內(nèi)容淋淀，此時(shí)采用的方法是[[LVAR.substr(start,length)]]（從什么位置開(kāi)始遥昧，取多長(zhǎng)）或者[LVAR.substring(from,to)]]（從什么位置到什么位置）。我用的是第二種：[[LVAR1.substring(5*(LVAR2.name-1),5*LVAR2.name-1)]]朵纷。
注：代碼的第一位不是1而是0炭臭。由于習(xí)慣，本次的一級(jí)類目字?jǐn)?shù)都是一樣的袍辞，故可以利用公式鞋仍，若不一樣的話，就得另想方法搅吁。
取數(shù)思路：從文本可以看出威创，該文本是由“一級(jí)類目，”的形式組合起來(lái)的谎懦，最后一個(gè)“肚豺，”可省略。我們可以看成5個(gè)字符為1組界拦，第1組數(shù)據(jù)中心是0-4吸申，第2組公司管理是5-9，第3組店面管理是10-14....我們可以退出第n組應(yīng)該是5*(n-1)-(5*n-1),也即是中繼器5*(ID-1)-(5*ID-1)享甸，因?yàn)樵蹅兙匦卧趾椭欣^器ID有對(duì)應(yīng)關(guān)系截碴，所以也就是5*(LVAR2.name-1)-（5*LVAR2.name-1)），LVAR.substring(from,to)]]是取從局部變量的哪個(gè)位置到哪個(gè)位置枪萄。所以整體公式就是[[LVAR1.substring(5*(LVAR2.name-1),5*LVAR2.name-1)]]
將該交互事件復(fù)制一份到第二個(gè)矩形文件隐岛。
二猫妙、顯示二級(jí)類目
?1.添加一動(dòng)態(tài)面板（二級(jí)菜單）瓷翻，設(shè)置面板樣式，自適應(yīng)內(nèi)容，在動(dòng)態(tài)面板中添加一個(gè)中繼器（二級(jí)菜單數(shù)據(jù)庫(kù)）并隱藏齐帚。設(shè)置數(shù)據(jù)庫(kù)中的矩形尺寸為256*40妒牙。添加中繼器數(shù)據(jù)Name、fid对妄、page.Name用來(lái)顯示二級(jí)菜單名湘今，fid同一級(jí)菜單中繼器的ID，用來(lái)控制顯示內(nèi)容剪菱，page用于打開(kāi)對(duì)應(yīng)的頁(yè)面摩瞎。此處我只添加了商品管理和系統(tǒng)設(shè)置的內(nèi)容。
2.關(guān)聯(lián)一級(jí)類目和二級(jí)類目：當(dāng)我們點(diǎn)擊一級(jí)類目的時(shí)候才會(huì)看到二級(jí)類目孝常，故交互事件應(yīng)該時(shí)單擊時(shí)旗们。我們看到的二級(jí)菜單欄有2種情況，一種是自己的二級(jí)菜單已展開(kāi)构灸，另一種就是未展開(kāi)上渴。所以需要做2種情況的判斷。
展開(kāi)時(shí)：二級(jí)菜單可見(jiàn)喜颁，且二級(jí)菜單的頂部與一級(jí)菜單的底部相同
此時(shí)點(diǎn)擊一級(jí)菜單稠氮，對(duì)應(yīng)的二級(jí)菜單應(yīng)該收起，故隱藏二級(jí)菜單半开。下方的一級(jí)菜單上移隔披，在更多選項(xiàng)中，拉動(dòng)元件的效果就是二級(jí)元件隱藏或收起時(shí)稿茉，下面的一級(jí)菜單會(huì)根據(jù)二級(jí)菜單的大小锹锰，修改位置。
收起時(shí)：非展開(kāi)時(shí)漓库。
????非展開(kāi)時(shí)也有2種恃慧，所有的二級(jí)菜單都沒(méi)展開(kāi)或者自己的二級(jí)菜單沒(méi)展開(kāi)，其他的二級(jí)菜單展開(kāi)了渺蒿。為了統(tǒng)一痢士，先將所有的二級(jí)菜單收起并將二級(jí)菜單中繼器重置（防止其他二級(jí)菜單已展開(kāi)）。添加篩選茂装，將自己想要二級(jí)菜單內(nèi)容從中繼器中顯示出來(lái)也就是一級(jí)菜單的ID與二級(jí)菜單的fid相同怠蹂，故fid=一級(jí)菜單的名字。
移動(dòng)二級(jí)菜單少态，將二級(jí)菜單移動(dòng)到對(duì)應(yīng)的對(duì)應(yīng)的一級(jí)菜單欄下城侧。移動(dòng)到一級(jí)菜單的左側(cè)、下方彼妻。
? ? 顯示二級(jí)菜單嫌佑。
此時(shí)點(diǎn)擊一級(jí)菜單顯示二級(jí)菜單的效果就做出來(lái)了豆茫，你可以在點(diǎn)擊一級(jí)菜單的時(shí)候設(shè)置元件狀態(tài)為選中，修改顏色
此時(shí)我們點(diǎn)擊二級(jí)菜單的屋摇，應(yīng)該打開(kāi)對(duì)應(yīng)的頁(yè)面揩魂，只需要在二級(jí)菜單數(shù)據(jù)庫(kù)中的矩形增加交互事件，點(diǎn)擊時(shí)打開(kāi)對(duì)應(yīng)的頁(yè)面炮温，可以用內(nèi)聯(lián)框架火脉，也可以用打開(kāi)鏈接。我用的內(nèi)聯(lián)框架柒啤。如果你覺(jué)得二級(jí)菜單的背景顏色跟一級(jí)菜單顏色一樣倦挂，你也可以在這里修改下樣式。
設(shè)置二級(jí)菜單點(diǎn)擊后效果担巩。點(diǎn)擊后修改背景顏色妒峦。再點(diǎn)擊其他二級(jí)菜單或一級(jí)菜單時(shí)，恢復(fù)顏色兵睛。大家肯定都知道是設(shè)置選中肯骇。但要設(shè)置成單選效果就需要點(diǎn)技巧了。首先將二級(jí)菜單數(shù)據(jù)庫(kù)中的矩形設(shè)置下選中狀態(tài)祖很。
其實(shí)中繼器已經(jīng)為中繼器內(nèi)的元件提供了單選選項(xiàng)笛丙，但是這針對(duì)元件組，不針對(duì)單的的元件假颇，所以我們需要將矩形元件編成組胚鸯。修改這個(gè)組的名稱和選中狀態(tài)，最重要的還是在選項(xiàng)組內(nèi)將這個(gè)組的名字選中笨鸡。有組了姜钳，可以將打開(kāi)頁(yè)面的事件也添加一份。
設(shè)置數(shù)據(jù)庫(kù)中的單選組項(xiàng)形耗。一共2處：選中中繼器樣式中的適應(yīng)HTML內(nèi)容和交互中的隔離列表項(xiàng)之間的單選按鈕組哥桥。
這樣我們就大功告成了。
為了美觀激涤，我們可以加上圖標(biāo)和icon拟糕，箭頭的icon有2中效果，默認(rèn)向下倦踢，展開(kāi)向上送滞。也就是設(shè)置圖片的選中狀態(tài)，選中時(shí)的圖片為箭頭向上的圖片辱挥。
將一級(jí)菜單欄的各欄進(jìn)行編組犁嗅。如圖所示
選中狀態(tài)與二級(jí)菜單的顯示狀態(tài)相同。所以可以在一級(jí)菜單點(diǎn)擊時(shí)修改選中狀態(tài)晤碘。
這樣就完全大功告成了~褂微！
