[教學]讓部落格導覽列選單能浮動置頂

寫完「部落格浮動側邊欄」之後，對於這樣的功能還可以有什麼樣的應用，直覺想到的是水平導覽列選單(也就是 Blogger 的 "網頁" 小工具)，認為直接把程式碼拿來套一下應該就能浮動置頂、凍結在網頁的最上方。

2013.12.20 公告：由於本篇程式碼會有些 bug，請直接前往「讓部落格導覽列選單能浮動置頂__更新版」。


試了一下發現小改程式碼即可，於是再加了一點透明的效果，滑鼠經過導覽列時解除透明，就像本站上方這個水平導覽列一般，或是請看下面的示意圖：







一、導覽列置頂的優點

其實此功能不少網站都看得到，例如「Google+」的上方就有，這個設計有不少優點：

1. 減少跳出率：如果是從搜尋引擎而來的訪客，對我們網站不熟，文章讀完、資料找到後，沒有個吸引注意力的設計，通常就直接離開了。那麼如果浮動導覽列恰巧有個訪客有興趣的主題，就有機會留住這位客人了。

2. 隨時提供導航：不是每個上網的人都很熟悉網站的構造、擺設位置等，那麼這個浮動導覽列只要項目設計得好，就能讓這位迷途羔羊的網路生手有一個很好的重點指引。

3. 節省操作：導覽列置頂可以省去按「回到頂端」這個按鈕，網頁可以少安裝、執行一個區塊，而且「回到頂端」按鈕有時會遮住一些文字。



二、安裝程式碼

在修改範本之前，如果第一次安裝本站工具的讀者，建議先閱讀「備份範本的訣竅」系列文章。

1. 以 Blogger 的操作為例，到後台「範本」→「編輯 HTML」，如果範本裡已經安裝過 jqeury 的話，就不必執行這個步驟(可搜尋看看有沒有 "jquery" 的字串)；如果沒安裝過 jquery，請搜尋 </head> 這個字串，找到後在此字串的前一行，插入以下程式碼：

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js'></script>

2. 接著請搜尋 </body> 這個字串，找到後在此字串的前一行，插入以下程式碼：


2013.12.20 公告：由於本篇程式碼會有些 bug，原程式碼已經刪除，請直接前往「讓部落格導覽列選單能浮動置頂__更新版」。


3. 如果想要修改參數的話，請依以上程式碼行號參考以下說明：

E：如果是 Blogger 官方的範本，這一行通常不需要改，導覽列區塊就是在這裡；如果不是官方範本、或改過範本的話，可參考「Google Chrome 開發人員工具」來找到導覽列的區塊，然後置換本行的紅色字串：

• 如果要填入區塊的 id，請填入 "#" + id 名稱，例如 "#navbar"。
• 如果要填入區塊的 class，請填入 "." + class 名稱，例如 ".navbar"。

F：藍色數字的參數為導覽列到網頁頂端的距離(px值)。

G：本文的程式碼設計了導覽列透明程度的參數，可填入 0 ～ 1 的數字，0 代表完全透明，1 代表不透明。

改完以上三項即可存檔。



三、注意事項

雖說在本站很容易就完成這個效果，不過拿了其他 Blogger 官方範本測試一下後，發現不一定每個版面都適合安裝，為什麼呢？


1. 頁籤形狀

以分站「三國志 11」為例，原始導覽列的頁籤為上面圓角、下面直角，這樣的形狀如果漂浮在頁面頂端，畫面倒變得有些滑稽，像是漂浮的城牆～


2. 顏色、透明度

後來我把導覽列拉到畫面最上方，經由修改 CSS 讓頁籤的形狀成為四邊圓角，這樣的形狀漂浮在頁面頂端就不會突兀了。拉到畫面最上方及修改 CSS 的過程可參考：

• 將 Blogger「標籤」小工具放在導覽列實作

不過這樣的浮動導覽列看起來還是比不上本站導覽列的效果，原因就出在分站的導覽列，個別頁籤的底色本身就有一定的透明度，而且整個導覽列的底色為透明，那麼在滑動的過程中，這個視覺效果會讓眼睛看起來不那麼舒服。


3. Blogger 導覽列不能拉動位置

就算使用了非透明底色的導覽列，如果像前面所提的三國志11分站那樣，把 Blogger 導覽列拉到別的位置，再使用本文的浮動導覽列，也可能出現問題，因為浮動的時候可能會發現，底色怎麼不見了？

因為 Blogger 把導覽列的 CSS 拆成好幾個地方放，把導覽列拉到別的位置後，本文的程式碼可能不知道原本底色的 CSS 在哪。因此我想要對 CSS 十分熟稔，才能解決這個問題。


4. 導覽列未設寬度

感謝 +Ken Lo 於【留言 #01】回報，原來本站的導覽列在不同螢幕解析度下(例如 ken 的螢幕為 1600 x 900)，浮動導覽列會亂跑，就像下圖一般──



測試了各種 CSS 的調整方法後，發現這是因為本站使用的範本，導覽列沒有設定寬度的緣故，才會一浮動就超出邊界四處遊走。如果讀者也有上圖這樣的情形，只要在導覽列的 CSS 區塊設定寬度為 100% 即可。例如程式碼 E 行所填入的導覽列區塊為 .tabs-outer，那麼就在範本裡搜尋 ".tabs-outer"，找到後加入以下紅字部分即可(如果範本沒有，就自己在 <style> ～ </style> 的區間新增以下全部內容)：

.tabs-outer {
....  // 原參數內容
width: 100%;
....  // 原參數內容
}



四、小結

結論是，想安裝本文的浮動導覽列，得先檢視導覽列的頁籤形狀、底色、位置等等的因素，才能有滿意的效果。

如果 Blogger 範本的導覽列不符合以上提到的因素，不過有 HTML/CSS 基礎的話，那麼還是有機會經由調整 CSS 來實現浮動導覽列的效果。不然的話，就是關閉官方導覽列，自己直接設計一個導覽列，會是可能的解決方案。

Blogger 導覽列相關技巧：