感謝導語：「菜單」時自動生成「標簽頁/面包屑」，并打開「對應頁面」；刪除「標簽頁/面包屑」，頁面關閉并定位到最近「標簽頁/面包屑」，打開「對應頁面」。如何完成這種效果呢？了用Axure自動生成標簽頁/面包屑得詳細教程，一起來看一下吧。

下載演示地址：

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

教程大綱：

完成整體布局制作菜單區交互制作標簽區交互聯動菜單區和標簽區設置打開頁面待優化思考中

創建1個主頁面（命名“主頁面”），3個子頁面（分別命名“菜單1”、“菜單2”、“菜單3”）

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

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

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

【菜單1】設置“鼠標單擊時”用例，如下圖：

【菜單1】設置選項組，選項組命名“menu”，如下圖：

【菜單2】和【菜單3】重復上述步驟

【菜單1】設置為“選中狀態”，如下圖：

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

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

選中【黑色icon】設置選項組，選項組命名“del”，默認“選中”，如下圖：

選中【黑色icon】設置“鼠標單擊時”用例，如下圖：

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

【矩形】設置選項組，選項組命名為“label”，默認“選中”（參考【黑色icon】設置）

【矩形】設置“鼠標單擊時”用例，如下圖：

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

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

【菜單1】設置“鼠標單擊時”用例，如下圖：

【菜單2】和【菜單3】與重復上述【菜單1】步驟，添加“鼠標單擊時”用例

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

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

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

【內聯框架】設置“載入時”用例，默認打開“菜單1”，如下圖：

【主頁面】進行效果預覽。

多次菜單后，導致標簽區超長，解決方案：將標簽區轉換為動態面板。

加入動態面板，新得標簽頁被隱藏，想要實現菜單縮小，并左移效果。解決方案：真得很麻煩，建議算了吧。

感謝由 等猴子大王 來自互聯網發布于人人都是產品經理，未經許可，禁止感謝

題圖來自 Unsplash，基于 CC0 協議