關於浮動導覽列的優點,為了節省篇幅請直接參考「舊版」→「一、導覽列置頂的優點」。不過舊版有以下的狀況未解決:
1. 底色透明的異常狀況
2. 留言 #9 +Ken Lo 表示「搜尋框會左右移動」
3. 當螢幕解析度不同時,導覽列的寬度會異常
因此本文的更新版,用來解決以上情形。以下先大致說明原理,想直接安裝程式碼請跳「二、安裝程式碼」。
1. 底色透明的異常狀況
在某些範本,例如 Blogger 官方的「簡單範本」,導覽列底色為透明,使用舊版程式碼時,不但透明的浮動導覽列效果很差,而且沒有頁籤的部位,在浮動的時候會消失。
◎ 解決方法:浮動時自動加上底色,非浮動時改回原底色;並事先抓取導覽列的寬度值,浮動時幫導覽列加上寬度。
2. 導覽列的搜尋框會左右移動
某些範本的導覽列會擺置搜尋框,而這種搜尋框通常使用「浮動靠右」的語法。當導覽列浮動時,原本的「浮動靠右」語法會失效,導致搜尋框往左移;等導覽列回到原始位置時,搜尋框才再次浮動靠右。
◎ 解決方法:同第一點,事先抓取導覽列的寬度值,浮動時幫導覽列加上寬度,搜尋框便不會亂跑了。
3. 當螢幕解析度不同時,導覽列的寬度會異常
這一點如同舊版內容 →「三、注意事項」→「4. 導覽列未設寬度」的示意圖,導覽列浮動時,導覽列寬度會撐大,若螢幕解析度改變時,就會看到異狀。
◎ 解決方法:同第一點,事先抓取導覽列的寬度值,浮動時幫導覽列加上寬度,導覽列便可固定寬度了。
瞭解原理後,程式碼稍加調整就能解決各種狀況。而且為了安裝懶人化,這次的安裝步驟只有一個。
如有安裝舊版「讓部落格導覽列選單能浮動置頂」,請先移除原本程式碼,然後按以下步驟進行:
1. 到後台「範本」→「編輯 HTML」→ 搜尋</body> 這個字串,找到後在此字串的前一行,插入以下程式碼:
2. 請參照以上程式碼行號,修改以下參數:
G:如果是 Blogger 官方的範本,這一行通常不需要改,導覽列區塊就是在這裡;如果不是官方範本、或改過範本的話,可參考「Google Chrome 開發人員工具」來找到導覽列的區塊,然後置換本行的紅色字串──
H:藍色數字的參數為導覽列到網頁頂端的距離(px值)。如果頁面頂端官方的選單導覽列(有 "下一個網誌" 那一欄)沒有隱藏的話,此行的數字說不定要設為 -30,請自行測試調整。
I:本文的程式碼設計了導覽列透明程度的參數,可填入 0 ~ 1 的數字,0代表完全透明,1代表不透明。
J:請依照綠色字串的註解,依導覽列的底色決定不設定字串、或是設定底色。想查詢色碼可參考這個「網頁色碼選擇器」。
相信這個更新版已經能解決大部分的異常狀況,剩餘的就是導覽列若有特殊形狀的頁籤,請依照舊版 →「三、注意事項」→「1. 頁籤形狀」與「2. 顏色、透明度」的說明來進行處理了。(2013.12.13)
1. 底色透明的異常狀況
2. 留言 #9 +Ken Lo 表示「搜尋框會左右移動」
3. 當螢幕解析度不同時,導覽列的寬度會異常
因此本文的更新版,用來解決以上情形。以下先大致說明原理,想直接安裝程式碼請跳「二、安裝程式碼」。
一、解決異常狀況的原理
1. 底色透明的異常狀況
在某些範本,例如 Blogger 官方的「簡單範本」,導覽列底色為透明,使用舊版程式碼時,不但透明的浮動導覽列效果很差,而且沒有頁籤的部位,在浮動的時候會消失。
◎ 解決方法:浮動時自動加上底色,非浮動時改回原底色;並事先抓取導覽列的寬度值,浮動時幫導覽列加上寬度。
2. 導覽列的搜尋框會左右移動
某些範本的導覽列會擺置搜尋框,而這種搜尋框通常使用「浮動靠右」的語法。當導覽列浮動時,原本的「浮動靠右」語法會失效,導致搜尋框往左移;等導覽列回到原始位置時,搜尋框才再次浮動靠右。
◎ 解決方法:同第一點,事先抓取導覽列的寬度值,浮動時幫導覽列加上寬度,搜尋框便不會亂跑了。
3. 當螢幕解析度不同時,導覽列的寬度會異常
這一點如同舊版內容 →「三、注意事項」→「4. 導覽列未設寬度」的示意圖,導覽列浮動時,導覽列寬度會撐大,若螢幕解析度改變時,就會看到異狀。
◎ 解決方法:同第一點,事先抓取導覽列的寬度值,浮動時幫導覽列加上寬度,導覽列便可固定寬度了。
二、安裝程式碼
瞭解原理後,程式碼稍加調整就能解決各種狀況。而且為了安裝懶人化,這次的安裝步驟只有一個。
如有安裝舊版「讓部落格導覽列選單能浮動置頂」,請先移除原本程式碼,然後按以下步驟進行:
1. 到後台「範本」→「編輯 HTML」→ 搜尋
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)