從上面的運作效果，大家不難發現，當我點選某一菜單時，導航區域會相應高亮顯示此分類的圖示，而其他圖示則會變暗。
好了，廢話不多說了，直接開始今天的實戰開發教程吧。
首先，我們先定義html頁面，代碼如下(為了友善示範，我直接導入了styles.css檔案，此時檔案沒任何樣式内容)：
大家從上面的html代碼中會發現,我的導航菜單使用了label或radio标簽，我為什麼要定義它們呢，因為我想知道我目前點選了哪一個菜單，因為單憑CSS，我們貌似沒法得到目前點選誰，是以當我點選Label時，會自動的選中某一radio了。
此時我們運作一下頁面，看看在未添加任何樣式時頁面的運作效果：
首先，我們先調整導航區域的大小，以及給導航區域添加邊框，樣式代碼如下：
此時頁面效果如下：
區域範圍大小已經定下來了，現在我們要給導航菜單設定樣式，隐藏單選按鈕，同時設定菜單與圖表之間的分割線：
此時效果如下：
細心的網友會發現，我在上面的CSS樣式中添加了transition屬性，此屬性主要是說，當菜單的任何一個屬性發生變化時，執行過渡動畫。
接着，我們給導航按鈕添加選中時的樣式，同時設定，當選擇某一菜單時，設定此分類的圖示不透明度為1，其它分類的不透明度為0.2，樣式代碼如下：
謝謝大家，咱們下個實戰開發案例再會。