分級(jí)頁(yè)面菜單是系統(tǒng)常用的框架，適用于多個(gè)頁(yè)面對(duì)應(yīng)多個(gè)子頁(yè)面的情況。本文作者分享了在Axure里制作一個(gè)分級(jí)頁(yè)面框架的原型模板的方法，一起來(lái)看一下吧。

分級(jí)頁(yè)面菜單是系統(tǒng)常用的框架，適用于多個(gè)頁(yè)面對(duì)應(yīng)多個(gè)子頁(yè)面的情況。那今天作者就教大家在Axure里如何制作一個(gè)分級(jí)頁(yè)面框架的原型模板。

本原型主要用中繼器制作，因?yàn)橹欣^器制作出來(lái)的原型模板，復(fù)用性強(qiáng)，再次使用時(shí)只需修改表格內(nèi)容的信息，即可自動(dòng)生成交互效果，所以我們用一般好用的模板都是用中繼器制作的。制作完成后包括以下效果：

1、點(diǎn)擊左側(cè)父級(jí)菜單，可以篩選出該父菜單對(duì)應(yīng)的子菜單

2、點(diǎn)擊子菜單，跳轉(zhuǎn)至對(duì)應(yīng)的店面

3、點(diǎn)擊返回按鈕，可以重新顯示對(duì)應(yīng)的子菜單的列表

案例對(duì)應(yīng)的原型地址：https://ft91es.axshare.com/#g=1

那下面我們一起開(kāi)始學(xué)習(xí)制作吧。

一、頁(yè)面2級(jí)菜單卡片

1. 材料準(zhǔn)備

頁(yè)面2級(jí)菜單卡片我們用中繼器制作，包括圖片、文字標(biāo)簽和矩形（背景），將他們組合在一起，如下圖所示擺放：

背景矩形可以根據(jù)實(shí)際需要增加懸停樣式，案例中就增加了淺藍(lán)色的懸停樣式。

中繼器表格里共4列內(nèi)容：

1. menu1：該頁(yè)面菜單對(duì)應(yīng)的1級(jí)菜單的內(nèi)容
2. menu2：該頁(yè)面菜單里文本標(biāo)簽顯示的文字內(nèi)容
3. picture：該頁(yè)面菜單里圖片元件顯示的圖片內(nèi)容
4. url：鼠標(biāo)單擊時(shí)跳轉(zhuǎn)的頁(yè)面

中繼器表格網(wǎng)格分布，具體樣式可以根據(jù)實(shí)際設(shè)置。

2. 交互設(shè)置

中繼器每項(xiàng)加載時(shí)，我們用設(shè)置文本的交互，將menu2列對(duì)應(yīng)的文字設(shè)置到頁(yè)面菜單中繼器里文本標(biāo)簽的元件；在用設(shè)置圖片的交互，將picture列的圖片值，設(shè)置到頁(yè)面菜單中繼器里圖片元件，這樣就完成了傳值。

鼠標(biāo)單擊中繼器內(nèi)部組合時(shí)，我們需要一個(gè)內(nèi)聯(lián)框架，我們?cè)O(shè)置內(nèi)聯(lián)框架的打開(kāi)中繼器你內(nèi)部url列對(duì)應(yīng)的頁(yè)面，并且將內(nèi)聯(lián)框架組合顯示置頂。

二、詳情頁(yè)面及內(nèi)聯(lián)框架

詳情頁(yè)面就是點(diǎn)擊上面菜單對(duì)應(yīng)的頁(yè)面，我們?cè)谛略鲰?yè)面里設(shè)置好對(duì)應(yīng)的內(nèi)容，通過(guò)內(nèi)聯(lián)框架來(lái)顯示，上面也提到，鼠標(biāo)單擊頁(yè)面菜單中繼器內(nèi)部組合時(shí)，會(huì)在內(nèi)聯(lián)框架中打開(kāi)對(duì)應(yīng)的頁(yè)面。

內(nèi)聯(lián)框架組合，包括內(nèi)聯(lián)框架和返回按鈕，該組合默認(rèn)隱藏，點(diǎn)擊頁(yè)面菜單中繼器內(nèi)部組合后才顯示。鼠標(biāo)單擊返回按鈕時(shí)，我們用隱藏的交互，將該組合隱藏，這樣就能返回頁(yè)面菜單的列表

三、左側(cè)1級(jí)菜單

1. 材料準(zhǔn)備

左側(cè)1級(jí)菜單我們主要用到中繼器（矩形、圖片、和文本標(biāo)簽）制作，外面加上背景矩形、插畫(huà)圖片來(lái)美化。中繼器內(nèi)部元件如下圖所示擺放：

中繼器內(nèi)表格共三列內(nèi)容

1. tu：對(duì)應(yīng)菜單項(xiàng)的圖標(biāo)
2. menu1：菜單的文字內(nèi)容
3. jinyong：對(duì)應(yīng)該菜單是否被選中

背景的矩形我們?cè)黾舆x中樣式（鼠標(biāo)移入時(shí)灰色）和禁用樣式（鼠標(biāo)點(diǎn)擊選擇該菜單是藍(lán)色）。

這里用選中樣式代替懸停樣式，中繼器里懸停樣式遇到更新行交互會(huì)有顯示bug。

2. 交互設(shè)置

一級(jí)菜單中繼器每項(xiàng)加載時(shí)，我們用設(shè)置文本的交互，將menu1列對(duì)應(yīng)的文字設(shè)置到中繼器里文本標(biāo)簽的元件；在用設(shè)置圖片的交互，將tu列的圖片值，設(shè)置到頁(yè)面菜單中繼器里圖片元件，這樣就完成了傳值。

考慮到菜單可以沒(méi)有圖標(biāo)的情況，我們也可以寫(xiě)一個(gè)判斷的交互，就是如果tu列的值不等于空，我們才設(shè)置圖片，如果為空，我們就隱藏圖片元件。

然后我們通過(guò)中繼器表格里jinyong列的值來(lái)控制哪個(gè)菜單項(xiàng)被選擇了，一般默認(rèn)選中第一個(gè)。我們?cè)O(shè)定如果，禁用列的值等于1，那么就禁用對(duì)應(yīng)的背景矩形（禁用后變藍(lán)），同時(shí)，我們還要對(duì)2級(jí)頁(yè)面菜單中繼器進(jìn)行篩選，篩選條件2級(jí)頁(yè)面菜單中繼器menu1的值等于當(dāng)前中繼器當(dāng)前行里mune1列的值。

鼠標(biāo)移入1級(jí)菜單中繼器內(nèi)部元件時(shí)，我們用選中的交互，將文本矩形選中，前面我們?cè)O(shè)置了選中樣式，就會(huì)有個(gè)移入變色的效果；鼠標(biāo)移出時(shí)，我們將文本矩形取消選中，這樣就回復(fù)原樣了

在鼠標(biāo)單擊1級(jí)菜單中繼器內(nèi)部元件時(shí)，我們其實(shí)就是要更新當(dāng)前菜單行jinyong的值，將值更新為1，這樣就可以變色，并且根據(jù)上面，jinyong列的值等于1時(shí)，對(duì)應(yīng)頁(yè)面中繼器進(jìn)行篩選，就可以看到對(duì)應(yīng)的菜單了。不過(guò)我們還需要考慮前面有菜單被選中的情況，所以要先做一個(gè)還原的操作，就是把中繼器里所有行jinyong列的值設(shè)置為0，然后再設(shè)置當(dāng)前行的值等于1.

最后，考慮到我們會(huì)在詳情頁(yè)點(diǎn)擊菜單，所以可以在中繼器重新加載的時(shí)候，設(shè)置隱藏內(nèi)聯(lián)框架組合，這樣就可以顯示對(duì)應(yīng)的頁(yè)面二級(jí)菜單。

這樣我們就完成了二級(jí)頁(yè)面菜單的原型模板了，再次使用時(shí)，基本上就是在中繼器表格里內(nèi)填寫(xiě)好對(duì)應(yīng)的信息，既可以自動(dòng)生成菜單篩選、跳轉(zhuǎn)的效果了，是不是很方便呢？

那以上就是本期的全部?jī)?nèi)容了，感謝您的閱讀，我們下期見(jiàn)~