如何讓三級菜單和標(biāo)簽頁實現(xiàn)交互，筆者在此給出了一個教程，簡單快捷的原型在向你招手~~

今天，教大家如何做一個框架，包含三級菜單和標(biāo)簽頁兩部分內(nèi)容，以及他們之間相互交互的內(nèi)容。

效果如下圖所示：

在線演示地址

一、效果介紹

1. 左邊菜單欄，最多有三級菜單，可以通過菜單中繼器維護(hù)，使用方便。
2. 點擊菜單，如果有子菜單會展開或收起子菜單；如果沒有子菜單，自動新增標(biāo)簽頁，并打開對應(yīng)頁面（不會重復(fù)生成標(biāo)簽）。
3. 點擊不同的標(biāo)簽頁，切換不同的頁面。
4. 刪除所有標(biāo)簽頁，自動跳轉(zhuǎn)到首頁。

二、使用方法

本模板使用簡單，已制作好交互效果，只需要填寫“菜單中繼器”的內(nèi)容即可直接使用。

• menu1：填寫一級菜單的名稱；
• menu2：填寫二級菜單的名稱（需要在一級菜單處先寫該二級菜單的一級菜單名稱）；
• menu3：填寫三級菜單的名稱（需要在一、二級菜單處先寫該三級菜單的一、二級菜單名稱）；
• picture：菜單文字前面的圖標(biāo)，可上傳圖片；
• see：1位載入時可見，0為隱藏；一般只有一級菜單填1，其他為0；
• xiala：如果有子菜單，填1；如果沒有，填0；
• xuan：填寫默認(rèn)值0即可；
• jinyong：填寫默認(rèn)值0即可。

三、制作方法

1. 用中繼器制作三級菜單

1）設(shè)置中繼器內(nèi)的表格

• menu1：填寫一級菜單的名稱；
• menu2：填寫二級菜單的名稱（需要在一級菜單處先寫該二級菜單的一級菜單名稱）；
• menu3：填寫三級菜單的名稱（需要在一、二級菜單處先寫該三級菜單的一、二級菜單名稱）；
• picture：菜單文字前面的圖標(biāo)，可上傳圖片；
• see：1位載入時可見，0為隱藏；一般只有一級菜單填1，其他為0；
• xiala：如果有子菜單，填1；如果沒有，填0；
• xuan：填寫默認(rèn)值0即可，既下拉箭頭向下；如果需要默認(rèn)打開下拉菜單，箭頭向右，填1；
• jinyong：填寫默認(rèn)值0即可，用于判斷是否選中。

2）中繼器材料

三個組合：

1. 一級組合（文本標(biāo)簽+矩形+圖片+下拉標(biāo)志）；
2. 二級組合（文本標(biāo)簽+矩形+圖片+下拉標(biāo)志）；
3. 三級組合（文本標(biāo)簽+矩形+圖片）。

3）中繼器內(nèi)邏輯

①點擊一級菜單：

• 收起狀態(tài)：如果有子菜單，打開子菜單；如果沒有子菜單，打開該名稱的頁面。
• 展開狀態(tài)：收起子菜單。

②點擊二級菜單:

• 收起狀態(tài)：如果有子菜單，打開子菜單；如果沒有子菜單，打開該名稱的頁面。
• 展開狀態(tài)：收起子菜單。

③點擊三級菜單，打開該名稱的頁面。

具體邏輯如下圖所示：

2. 用中繼器制作標(biāo)簽頁

1）設(shè)置中繼器內(nèi)的表格

• column0：標(biāo)簽頁名稱，默認(rèn)給一個首頁；
• xuanzhong：1打開對應(yīng)頁面，0不打開。

2）中繼器材料

1個好看的標(biāo)簽矩形，刪除“x”形狀。

3）中繼器內(nèi)邏輯

點擊標(biāo)簽矩形，取消選中其他標(biāo)簽，選中該標(biāo)簽并打開對應(yīng)頁面。

點擊“x”，刪除該標(biāo)簽，自動選擇下個標(biāo)簽，并打開選中標(biāo)簽的頁面。如果所有標(biāo)簽被刪除，自動生成一個首頁標(biāo)簽，并打開首頁。

具體邏輯如下圖所示：

3. 制作對應(yīng)頁面

頁面名稱要和菜單中繼器內(nèi)名稱相同（沒有子菜單的菜單），然后在對應(yīng)頁面制作對應(yīng)內(nèi)容即可。

4. 制作菜單與標(biāo)簽頁的交互

點擊沒有子菜單的菜單時，記錄該菜單文字，判斷是否有該標(biāo)簽頁。如果有，選中并打開該標(biāo)簽頁；如果無，新建標(biāo)簽頁并打開對應(yīng)頁面。

具體邏輯如下圖所示：

總結(jié)

該原型非常實用，但制作相對復(fù)雜，新手不容易完成。

制作完成后，以后使用方便，僅需簡單填寫菜單中繼器的內(nèi)容，即可擁有完美的效果，所以強(qiáng)烈推薦給各位使用。

本文由 @梓賢Vigo 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載

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