感謝導(dǎo)語：「菜單」時(shí)自動(dòng)生成「標(biāo)簽頁/面包屑」，并打開「對(duì)應(yīng)頁面」；刪除「標(biāo)簽頁/面包屑」，頁面關(guān)閉并定位到最近「標(biāo)簽頁/面包屑」，打開「對(duì)應(yīng)頁面」。如何完成這種效果呢？了用Axure自動(dòng)生成標(biāo)簽頁/面包屑得詳細(xì)教程，一起來看一下吧。

下載演示地址：

pan.baidu/s/1z_5GGwiS0qhjG7owPft5_Q（提取碼：c36r）

教程大綱：

完成整體布局制作菜單區(qū)交互制作標(biāo)簽區(qū)交互聯(lián)動(dòng)菜單區(qū)和標(biāo)簽區(qū)設(shè)置打開頁面待優(yōu)化思考中

創(chuàng)建1個(gè)主頁面（命名“主頁面”），3個(gè)子頁面（分別命名“菜單1”、“菜單2”、“菜單3”）

使用元件：矩形、內(nèi)聯(lián)框架、中繼器、白色取消icon、黑色取消icon（icon下載地址：特別iconfont/）

在【主頁面】按照下圖完成整體布局，如下圖：

右鍵選中【菜單1】- 選中【交互樣式…】- 【選中】，設(shè)置“字體顏色”為白色、“填充顏色”為“666666”，如下圖：

【菜單1】設(shè)置“鼠標(biāo)單擊時(shí)”用例，如下圖：

【菜單1】設(shè)置選項(xiàng)組，選項(xiàng)組命名“menu”，如下圖：

【菜單2】和【菜單3】重復(fù)上述步驟

【菜單1】設(shè)置為“選中狀態(tài)”，如下圖：

雙擊打開【中繼器】，復(fù)制【黑色icon】放置到中繼器，如下圖：

右鍵【黑色icon】- 選中【交互樣式…】- 【選中】，設(shè)置【支持】并導(dǎo)入【白色icon】，如下圖：

選中【黑色icon】設(shè)置選項(xiàng)組，選項(xiàng)組命名“del”，默認(rèn)“選中”，如下圖：

選中【黑色icon】設(shè)置“鼠標(biāo)單擊時(shí)”用例，如下圖：

右鍵【矩形】- 選中【交互樣式…】- 【選中】，設(shè)置“字體顏色”為白色、“填充顏色”為“666666”（參考【菜單1】設(shè)置）

【矩形】設(shè)置選項(xiàng)組，選項(xiàng)組命名為“l(fā)abel”，默認(rèn)“選中”（參考【黑色icon】設(shè)置）

【矩形】設(shè)置“鼠標(biāo)單擊時(shí)”用例，如下圖：

返回【主頁面】，【中繼器】，添加1行1列（雙擊重命名“title”和“page”），并取消“隔離單選按鈕效果”和“隔離選項(xiàng)組”效果，如下圖：

【中繼器】設(shè)置樣式，設(shè)置布局“水平”、間距列“10”，如下圖：

【菜單1】設(shè)置“鼠標(biāo)單擊時(shí)”用例，如下圖：

【菜單2】和【菜單3】與重復(fù)上述【菜單1】步驟，添加“鼠標(biāo)單擊時(shí)”用例

【中繼器】刪除1行，設(shè)置第1行（title為“菜單1”、page為“菜單1.html”），如下圖：

分別打開【子頁面-菜單1】、【子頁面-菜單2】、【子頁面-菜單3】，放入不同得元件，以便對(duì)于打開頁面做出區(qū)分，如下圖：

返回【主頁面】，雙擊【中繼器】打開中繼器頁面，矩形，設(shè)置“選中時(shí)”用例，如下圖：

【內(nèi)聯(lián)框架】設(shè)置“載入時(shí)”用例，默認(rèn)打開“菜單1”，如下圖：

【主頁面】進(jìn)行效果預(yù)覽。

多次菜單后，導(dǎo)致標(biāo)簽區(qū)超長(zhǎng)，解決方案：將標(biāo)簽區(qū)轉(zhuǎn)換為動(dòng)態(tài)面板。

加入動(dòng)態(tài)面板，新得標(biāo)簽頁被隱藏，想要實(shí)現(xiàn)菜單縮小，并左移效果。解決方案：真得很麻煩，建議算了吧。

感謝由 等猴子大王 來自互聯(lián)網(wǎng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)許可，禁止感謝

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