感謝導(dǎo)語:感謝閱讀「菜單」時自動生成「標(biāo)簽頁/面包屑」,并打開「對應(yīng)頁面」;刪除「標(biāo)簽頁/面包屑」,頁面關(guān)閉并定位到最近「標(biāo)簽頁/面包屑」,打開「對應(yīng)頁面」。如何完成這種效果呢?感謝感謝作者分享分享了用Axure自動生成標(biāo)簽頁/面包屑得詳細(xì)教程,一起來看一下吧。
下載演示地址:
感謝分享pan.baidu感謝原創(chuàng)分享者/s/1z_5GGwiS0qhjG7owPft5_Q(提取碼:c36r)
教程大綱:
- 完成整體布局制作菜單區(qū)交互制作標(biāo)簽區(qū)交互聯(lián)動菜單區(qū)和標(biāo)簽區(qū)設(shè)置感謝閱讀打開頁面待優(yōu)化思考中
創(chuàng)建1個主頁面(命名“主頁面”),3個子頁面(分別命名“菜單1”、“菜單2”、“菜單3”)
使用元件:矩形、內(nèi)聯(lián)框架、中繼器、白色取消icon、黑色取消icon(icon下載地址:感謝分享特別iconfont感謝原創(chuàng)分享者/)
在【主頁面】按照下圖完成整體布局,如下圖:
02 制作菜單交互右鍵選中【菜單1】- 選中【交互樣式…】- 感謝閱讀【選中】,設(shè)置“字體顏色”為白色、“填充顏色”為“666666”,如下圖:
感謝閱讀【菜單1】設(shè)置“鼠標(biāo)單擊時”用例,如下圖:
感謝閱讀【菜單1】設(shè)置選項組,選項組命名“menu”,如下圖:
【菜單2】和【菜單3】重復(fù)上述步驟
感謝閱讀【菜單1】設(shè)置為“選中狀態(tài)”,如下圖:
03 制作標(biāo)簽交互雙擊打開【中繼器】,復(fù)制【黑色icon】放置到中繼器,如下圖:
右鍵感謝閱讀【黑色icon】- 選中【交互樣式…】- 感謝閱讀【選中】,設(shè)置【支持】并導(dǎo)入【白色icon】,如下圖:
選中【黑色icon】設(shè)置選項組,選項組命名“del”,默認(rèn)“選中”,如下圖:
選中【黑色icon】設(shè)置“鼠標(biāo)單擊時”用例,如下圖:
右鍵感謝閱讀【矩形】- 選中【交互樣式…】- 感謝閱讀【選中】,設(shè)置“字體顏色”為白色、“填充顏色”為“666666”(參考【菜單1】設(shè)置)
感謝閱讀【矩形】設(shè)置選項組,選項組命名為“l(fā)abel”,默認(rèn)“選中”(參考【黑色icon】設(shè)置)
感謝閱讀【矩形】設(shè)置“鼠標(biāo)單擊時”用例,如下圖:
返回【主頁面】,感謝閱讀【中繼器】,添加1行1列(雙擊重命名“title”和“page”),并取消“隔離單選按鈕效果”和“隔離選項組”效果,如下圖:
感謝閱讀【中繼器】設(shè)置樣式,設(shè)置布局“水平”、間距列“10”,如下圖:
04 菜單區(qū)和標(biāo)簽區(qū)聯(lián)動感謝閱讀【菜單1】設(shè)置“鼠標(biāo)單擊時”用例,如下圖:
【菜單2】和【菜單3】與重復(fù)上述【菜單1】步驟,添加“鼠標(biāo)單擊時”用例
感謝閱讀【中繼器】刪除1行,設(shè)置第1行(title為“菜單1”、page為“菜單1.html”),如下圖:
05 設(shè)置感謝閱讀打開頁面分別打開【子頁面-菜單1】、【子頁面-菜單2】、【子頁面-菜單3】,放入不同得元件,以便對于打開頁面做出區(qū)分,如下圖:
返回【主頁面】,雙擊【中繼器】打開中繼器頁面,感謝閱讀矩形,設(shè)置“選中時”用例,如下圖:
感謝閱讀【內(nèi)聯(lián)框架】設(shè)置“載入時”用例,默認(rèn)打開“菜單1”,如下圖:
感謝閱讀【主頁面】進(jìn)行效果預(yù)覽。
06 待優(yōu)化思考中…多次感謝閱讀菜單后,導(dǎo)致標(biāo)簽區(qū)超長,解決方案:將標(biāo)簽區(qū)轉(zhuǎn)換為動態(tài)面板。
加入動態(tài)面板,新得標(biāo)簽頁被隱藏,想要實現(xiàn)菜單縮小,并左移效果。解決方案:真得很麻煩,建議算了吧。
感謝由 等猴子大王 來自互聯(lián)網(wǎng)發(fā)布于人人都是產(chǎn)品經(jīng)理,未經(jīng)許可,禁止感謝
題圖來自 Unsplash,基于 CC0 協(xié)議