Quantcast
Channel: WFU BLOG
Viewing all articles
Browse latest Browse all 784

讓部落格導覽列選單能浮動置頂__更新版

$
0
0
關於浮動導覽列的優點,為了節省篇幅請直接參考「舊版」→「一、導覽列置頂的優點」。不過舊版有以下的狀況未解決:

1. 底色透明的異常狀況
2. 留言 #9 +Ken Lo 表示「搜尋框會左右移動」
3. 當螢幕解析度不同時,導覽列的寬度會異常

因此本文的更新版,用來解決以上情形。以下先大致說明原理,想直接安裝程式碼請跳「二、安裝程式碼」。



一、解決異常狀況的原理


1. 底色透明的異常狀況

在某些範本,例如 Blogger 官方的「簡單範本」,導覽列底色為透明,使用舊版程式碼時,不但透明的浮動導覽列效果很差,而且沒有頁籤的部位,在浮動的時候會消失。

◎ 解決方法:浮動時自動加上底色,非浮動時改回原底色;並事先抓取導覽列的寬度值,浮動時幫導覽列加上寬度。


2. 導覽列的搜尋框會左右移動

某些範本的導覽列會擺置搜尋框,而這種搜尋框通常使用「浮動靠右」的語法。當導覽列浮動時,原本的「浮動靠右」語法會失效,導致搜尋框往左移;等導覽列回到原始位置時,搜尋框才再次浮動靠右。

◎ 解決方法:同第一點,事先抓取導覽列的寬度值,浮動時幫導覽列加上寬度,搜尋框便不會亂跑了。


3. 當螢幕解析度不同時,導覽列的寬度會異常

這一點如同舊版內容 →「三、注意事項」→「4. 導覽列未設寬度」的示意圖,導覽列浮動時,導覽列寬度會撐大,若螢幕解析度改變時,就會看到異狀。

◎ 解決方法:同第一點,事先抓取導覽列的寬度值,浮動時幫導覽列加上寬度,導覽列便可固定寬度了。





二、安裝程式碼


瞭解原理後,程式碼稍加調整就能解決各種狀況。而且為了安裝懶人化,這次的安裝步驟只有一個。

如有安裝舊版「讓部落格導覽列選單能浮動置頂」,請先移除原本程式碼,然後按以下步驟進行:

1. 到後台「範本」→「編輯 HTML」→ 搜尋 </body>這個字串,找到後在此字串的前一行,插入以下程式碼:



2. 請參照以上程式碼行號,修改以下參數:

G:如果是 Blogger 官方的範本,這一行通常不需要改,導覽列區塊就是在這裡;如果不是官方範本、或改過範本的話,可參考「Google Chrome 開發人員工具」來找到導覽列的區塊,然後置換本行的紅色字串──
  • 如果要填入區塊的 id,請填入 "#" + id 名稱,例如 "#navbar"。
  • 如果要填入區塊的 class,請填入 "." + class 名稱,例如 ".navbar"。

H:藍色數字的參數為導覽列到網頁頂端的距離(px值)。如果頁面頂端官方的選單導覽列(有 "下一個網誌" 那一欄)沒有隱藏的話,此行的數字說不定要設為 -30,請自行測試調整。

I:本文的程式碼設計了導覽列透明程度的參數,可填入 0 ~ 1 的數字,0代表完全透明,1代表不透明。

J:請依照綠色字串的註解,依導覽列的底色決定不設定字串、或是設定底色。想查詢色碼可參考這個「網頁色碼選擇器」。



三、小結


相信這個更新版已經能解決大部分的異常狀況,剩餘的就是導覽列若有特殊形狀的頁籤,請依照舊版 →「三、注意事項」→「1. 頁籤形狀」與「2. 顏色、透明度」的說明來進行處理了。(2013.12.13)

Viewing all articles
Browse latest Browse all 784

Trending Articles