Home » 8.0 線上教學 » 9-2 進階 Dynamic Panel:Mega Menu

9-2 進階 Dynamic Panel:Mega Menu

本節學習目標

  • 學會使用進階 Dynamic Panel
  • 透過 Dynamic Panel 製作 Mega menu



9-2-mega-menu-1
準備需要的物件
先將製作輪播需要的物件(Tab、Menu)從物件庫拖曳至工作區。


9-2-mega-menu-2
將物件轉換成 Dynamic panel
選取 Menu,按下右鍵,在選單最下方點選「Convert to Dynamic Panel」。

隱藏物件 Dynamic panel
選取 Dynamic panel 後,至工作區勾選「Hidden」。


9-2-mega-menu-3
替 Dynamic panel 進行命名
選取 Dynamic Panelc ,至檢視窗格的「Dynamic Panel Name」分別為這兩個 Dynamic Panel 命名為「Menu 1」、「Menu 2」。

命名完畢後,可以在右下方 Outline 窗格剛才所建立的 Dynamic Panel 與命名。


9-2-mega-menu-4
編輯互動事件
選取「Tab1」頁籤,點擊兩下檢視窗格屬性中的「OnMouseEnter」,開啟事件編輯器進行編輯。

Case Name: 此事件的描述,可以對事件命名
Click to add actions:顯示所有動作型態(Action),我們可以點擊此觸發事件需要的動作型態即可
Organize actions:已經選擇的動作型態和 Configure actions 內的設定皆會出現在此區塊
Configure actions:設定動作型態的細節內容

  1. 選擇「Show/Hide」
  2. 勾選要「顯示的 Dynamic panel」
  3. 勾選「Show」
  4. More Options:「Treat as Flyout」