調整導航列

XOOPS佈景開發

4-1 調整導航列

XOOPS預設首頁是 run 「system」模組，在偏好設定可以調整
我們希望在「首頁」有迎賓圖，但在其他模組則省略
目前導航是「白底黑字不透明」，我們將其改為「黑底白字透明」
這個選單調用了「bootstrap 的 affix.js」插件
頁面加載完畢後，應用affix效果的內容會增加一個.affix-top樣式類
當頁面向下滾動了top的距離時，.affix-top切換成.affix類
頁面滾動到離底部距離為bottom時，.affix類切換成.affix-bottom
我們根據需要定義這三個類的樣式就好了。
第5、6、7可以用chrome 的開發工具觀看，因為我們把選單固定在上方，所以看不到.affix-bottom
CSS3 RGBA 顏色值是這樣規定的：rgba(red, green, blue, alpha)。alpha 參數是介於0.0（完全透明）與1.0（完全不透明）的數字。

creative.css

  .navbar-default .nav > li > a,
  .navbar-default .nav > li > a:focus {
    color: rgba(255, 255, 255, 0.7);/*ugm*/
  }

.navbar-default.affix {
    /*background-color: white;*//*ugm*/
    background: rgba(51, 51, 51, 0.8);
    border-color: rgba(34, 34, 34, 0.05);
  }

creative.js ：在 #mainNav 前面加 .system ，所以只有在首頁才會執行

//------- ugm -----
    // Offset for Main Navigation
    $('.system #mainNav').affix({
         offset: {
             top: 300
         }
    })