感謝導(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感謝原創(chuàng)分享者/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感謝原創(chuàng)分享者/）
在【主頁面】按照下圖完成整體布局，如下圖：
02 制作菜單交互右鍵選中【菜單1】- 選中【交互樣式…】- 感謝閱讀【選中】，設(shè)置“字體顏色”為白色、“填充顏色”為“666666”，如下圖：
感謝閱讀【菜單1】設(shè)置“鼠標(biāo)單擊時(shí)”用例，如下圖：
感謝閱讀【菜單1】設(shè)置選項(xiàng)組，選項(xiàng)組命名“menu”，如下圖：
【菜單2】和【菜單3】重復(fù)上述步驟
感謝閱讀【菜單1】設(shè)置為“選中狀態(tài)”，如下圖：
03 制作標(biāo)簽交互雙擊打開【中繼器】，復(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”，如下圖：
04 菜單區(qū)和標(biāo)簽區(qū)聯(lián)動(dòng)感謝閱讀【菜單1】設(shè)置“鼠標(biāo)單擊時(shí)”用例，如下圖：
【菜單2】和【菜單3】與重復(fù)上述【菜單1】步驟，添加“鼠標(biāo)單擊時(shí)”用例
感謝閱讀【中繼器】刪除1行，設(shè)置第1行（title為“菜單1”、page為“菜單1.html”），如下圖：
05 設(shè)置感謝閱讀打開頁面分別打開【子頁面-菜單1】、【子頁面-菜單2】、【子頁面-菜單3】，放入不同得元件，以便對(duì)于打開頁面做出區(qū)分，如下圖：
返回【主頁面】，雙擊【中繼器】打開中繼器頁面，感謝閱讀矩形，設(shè)置“選中時(shí)”用例，如下圖：
感謝閱讀【內(nèi)聯(lián)框架】設(shè)置“載入時(shí)”用例，默認(rèn)打開“菜單1”，如下圖：
感謝閱讀【主頁面】進(jìn)行效果預(yù)覽。
06 待優(yōu)化思考中…多次感謝閱讀菜單后，導(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é)議
