起點課堂會員權益
職業體系課特權
線下行業大會特權
個人IP打造特權
30+門專項技能課
1300+專題課程
12場職場軟技能直播
12場求職輔導直播
12場專業技能直播
會員專屬社群
榮耀標識側邊欄效果：如何制作簡單的側邊欄及跳轉的交互？
本篇講述：如何制作簡單的側邊欄及跳轉的交互？為“側邊欄效果”系列篇章的第一篇。
1.左側上方頁面處添加四個新頁面，左側下方添加母版，起名為側邊欄。
2.雙擊母版側邊欄。
3.從左側元件庫，基本元件處拖出一個矩形，寬改為80，高改為30。
4.從左側元件庫，菜單和表格中拖出一個表格。
5.右鍵Column2，點擊刪除列，然后右鍵Column3，點擊刪除列，右鍵Column1，點擊刪除行。
6.把剩下的表格，兩個單元格分別改名為P1，P2。
7.選中整個表格，右鍵轉換為動態面板。
8.右側檢索，表格名稱處，起名P1+P2DT。
9.右側檢視，樣式，選取隱藏。
10.選中P1+P2矩形，右側檢索，屬性，交互，雙擊鼠標單擊時。
11.點擊顯示/隱藏，選中P1+P2DT動態面板，可見性選切換，選中推動/拉動元件，確定。
12.選中P1+P2矩形和P1+P2DT動態面板。
13.按住CTRL，鼠標拖動，復制出一份。
14.將復制出的P1+P2矩形改為P3+P4。
15.將復制出的P1+P2DT動態面板改名為P3+P4DT。
16.雙擊右側概要：母版中，P3+P4DT動態面板下的State1。
17.將P3+P4DT內的表格中的單元格P1和P2，改為P3和P4。
18.點擊P3單元格，右側檢視，交互，雙擊鼠標單擊時。
19.點擊打開鏈接，選中New Page3，確定。
20.同理，P4單元格設置打開鏈接到New Page4。
21.雙擊右側概要，P1+P2DT動態面板下的State1。
22.同理，分別為P1，P2單元格添加鼠標單擊時，跳轉鏈接到New Page1，New Page2。
23.雙擊左側側邊欄母版，回到母版主頁。
24.右鍵側邊欄，點擊添加到頁面中。
25.點擊全部選中，確定。
26.雙擊左側頁面，New Page1，進入New Page1頁面。
27.從左側元件庫，基本元件，拖出一個矩形，輸入P1，字體調大，加粗。
28.同理，為2，3，4頁面分別添加矩形，鍵入P2，P3，P4，代表不同頁面。
此時預覽可以看到，點擊P1+P2，會展開P1和P2，點擊P1和P2分別可以跳轉到New Page1和New Page2頁面，P3，P4頁面同理。
上篇講解了如何制作簡單的側邊欄及跳轉的交互，下篇中，將講解如何在跳轉后保持側邊欄已有的展開狀態，以及通過字體顏色變化表示當前所在頁面。
本文由 @落塵 原創發布于人人都是產品經理。未經許可，禁止轉載
題圖來自 Unsplash ，基于 CC0 協議
- 目前還沒評論，等你發揮！
