????????今天使用中繼器來實現一個簡單的二級導航欄。這是一款折疊形可變導航，一般應用在系統頁面左側。它的最大優勢是：1、菜單根據中繼器配置的列表動態加載整個導航菜單（后期系統維護升級可快速增減菜單）。2、二級導航菜單數量不等也可以正常工作（突破局限）。
? ? ? ? 下面以制作一個簡單的后臺管理系統導航為例。

一、準備元件

1、將工作界面劃分為三塊：頭部放一個動態面板，里面放系統logo和系統名稱；左側導航區域放一個動態面板，里面放一個中繼器；右側放一個內聯框架(動態交互區域)。

2、雙擊中繼器，進入中繼器編輯模式。復制矩形元件并粘貼多三個，共四個按右對齊排列。如下圖所示，一級導航（w:180px，h：30px），二級導航（w:160px，h:25px）。注意，各矩形件元件間的行高是10px，各矩形元件的填入文字及命名見圖。
將所有二級導航選中，將它們設置為一個組合，命名為：組合_二級導航。這個組合用于點擊一級導航進行交互時，實現組合整體展開/收縮（隱藏/顯示）。
再將它們設置為一個選項組，命名為：選項組_二級導航。這個選項組用于點擊二級導航進行交互時，實現只選中一個二級導航。注意：要將所有二級導航選中，右鍵選中：選項組，命名為：選項組_二級導航。不是將它們的組合設置為選項組。
同樣，將一級導航也設置為一個選項組，命名為：選項組_一級導航。

二、設置元件樣式

1、設置中繼器的行距。即間距為10px。

2、設置一級導航和二級導航的鼠標懸停、選中的樣式。一級導航和二級導航鼠標懸停樣式設置，填充顏色為：FFCC99；一級導航選中樣式設置，字色為：FFCCCC；二級導航選中樣式設置，填充顏色為：FFCCCC;

三、設置導航數據。以后系統升級，增減導航就是通過設置導航數據來完成。

1、設置中繼器樣式數據。選中：中繼器，選中：樣式。

2、設置樣式數據列名。雙擊第一列：Column0，重新命名為：FirstLevel。這一列對應的是一級導航。雙擊第二列，命名為：SecLevel1。重復操作，得到?SecLevel2、SecLevel3。SecLevel1、SecLevel2、SecLevel3分別對應的是二級導航1、二級導航2、二級導航3。

3、設置樣式數據內容。這是導航顯示的結構數據，或者說，導航將根據設置的樣式數據內容來顯示。以后系統升級，只要修改這個數據內容即可。根據需求，這里設置的數據如下：

四、設置交互

1、設置載入時事件。在載入元件時，根據顯示樣式數據設置的值作為導航文本。
選中：中繼器，選中：交互。選擇事件：載入時，選擇：設置文本，選擇：添加目標。選中：一級導航。點擊 fx，彈出編輯框。如下圖：

刪除中間輸入框中的：一級導航。點擊：插入變量或函數，選中：Item.FirstLeve，得到結果。如下圖：

同樣，設置二級導航1、二級導航2、二級導航3 的 fx 值分別為 Item.SecLeve1、Item.SecLeve2、Item.SecLeve3。得到結果，如下圖：

2、設置每項加載事件。在每項加載時，根據顯示樣式數據設置的值顯示或隱藏二級導航。從而實現二級導航菜單數量不等也可以工作。
選中：中繼器，選中：交互。選擇事件：每項加載，選擇：啟用情形。添加條件，第一個框選中：值，點擊第二個框：fx，選中：Item.SecLevel1。如下圖：

在此情形下，添加動作，選擇：顯示/隱藏，添加目標：二級導航1，選中：隱藏動作。這個設置是實現當二級導航1對應的數據值為空時，隱藏該二級導航菜單選擇項。同樣，設置二級導航2、二級導航3。得到結果，如下圖：

3、設置二級導航的組合整體展開/收縮。即當點擊一下一級導航時，或展開，或隱藏其下面全部二級導航。
選中：一級導航，點擊：新建交互，選擇：單擊時，選擇動作：顯示或隱藏。選擇目標：組合_二級導航，選擇：切換。設置參數，如下圖：

如果想實現初次加載導航時，二級導航是折疊的。即只看到一級導航。則可以將二級導航的組合設置為隱藏。
雙擊：中繼器，選中：組合_二級導航，右鍵，選擇：設為隱藏。

4、設置二級導航的單擊事件。二級導航選中時，父級也選中。同時，在內聯框架中打開鏈接頁面。
選中：二級導航1，選擇事件：單擊時，點擊：啟用情形，點擊：添加條件，選擇：值，點 fx，點擊：插入變量或函數，選擇：Item.SecLevel1，設置值：角色列表。添加動作：設置選中，選擇目標：二級導航1，值為真。添加目標，選中：一級導航，值為真。添加動作：框架中打開鏈接，選擇元件：內聯框架，選擇頁面：角色列表。

同樣，添加情形2，設置二級導航1對應的第二行數據：系統日志。如果有第3行...，也同樣設置。得到結果，如下圖：

同樣，設置：二級導航2、二級導航3 的單擊事件。

至此，使用中繼器來實現二級導航欄制作完畢。按F5預覽下效果。