2013年12月13日

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

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

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. 顏色、透明度」的說明來進行處理了。


Blogger 導覽列相關技巧:

44 則留言:

  1. 作業再度完成一項!

    需要前情提要一下:我的"網頁pagelist(範本預設為導覽列)"已經被我拉到側欄當浮動側欄,現在原本導覽列位置是我另外設的"連結清單"。

    我一開始是直接貼上文章內的語法,沒有修改id,但我直接放這語法之後就有浮動,可是它卻是把我標頭下另加的一段文字一起浮動,修改連結清單id之後就解決了,謝謝wayne~~~

    回覆刪除
  2. <113486130416858906>(以上內容請勿刪除,以下引言請自行刪減) [quote]直接放這語法之後就有浮動,可是它卻是把我標頭下另加的一段文字一起浮動[/quote]我注意到你拉了一些小工具到原本導覽列的區塊,因此就會造成 "標頭下另加的一段文字一起浮動" 這樣的情形。因此解決方式如你所描述的,更改 G 行的參數為浮動區塊的 "id字串" 即可。

    回覆刪除
  3. 你好,我浮動導覽列可以,但是我的照片也放在網頁(Page)下面,導致網下拉時,圖片也跟可浮動?我需要修改哪裡?

    回覆刪除
  4. <1908939544348316512>(以上內容請勿刪除,從括號之後開始留言)請問你的網址?我看看要怎麼調整。

    回覆刪除
  5. 作者已經移除這則留言。

    回覆刪除
  6. 原來浮動導覽列有新版,我改裝這個新版就修正了我的導覽列異常了XD

    回覆刪除
  7. <7940345774390721690>(以上內容請勿刪除,從括號之後開始留言)我看倒是沒有變正常~
    大概是你按我另一篇弄了行動版的導覽列,導致現在導覽列有兩倍的高度。你試試看把 G 行的紅色字串參數改為 #PageList1 看看能否正常。

    回覆刪除
  8. <1284873113249981273>(以上內容請勿刪除,從括號之後開始留言)我改好了! 但我自己看除了滑鼠往下滾的時候導覽列底色從原本的黑色變白色之外其他沒異狀,請幫我看看你那邊看我這正常了嗎? 謝謝@@

    回覆刪除
  9. <2049766465799700769>(以上內容請勿刪除,從括號之後開始留言)還是不行..導覽列上面還是有空白區塊。底色的問題從我這沒辦法測出原因,blogger這部份的CSS搞得太複雜了,暫且先擱置,其他部份你先這麼做吧:

    1. 行動版的那個導覽列看來是問題主因,你把行動版導覽列參數改為 mobile='only', 這樣應該在網頁版就不會出現,而佔用那個空白區塊。

    2. 第 1 點完成後,你看下拉選單是否恢復正常;如果還沒恢復正常,把下拉選單的參數一樣改為 "#PageList1" 試試看。

    回覆刪除
  10. <4725848289738745345>(以上內容請勿刪除,從括號之後開始留言)我兩點都做了!但是導覽列往下捲動的時候上方還是不能置頂,留有一塊區域...好想把它往上移動哦= =

    回覆刪除
  11. <8991740823941986877>(以上內容請勿刪除,從括號之後開始留言)看來下拉選單解決了,剩下的這個問題還是很頭痛~ 原因應該是兩個導覽列處於同一區塊,導致連動的關係。你參考「Blogger 如何安裝兩個導覽列?」,把行動版拉到別的地方去,例如標頭的上方(這樣比較保險);如果不好操作的話,拉到側邊欄最下面看看,反正行動版在網頁版不顯示。

    不過完成後,記得到行動版檢查一下導覽列是否正常。

    回覆刪除
  12. <7691777195306876673>(以上內容請勿刪除,從括號之後開始留言)我已經將行動版拉到網誌標題上方了,可是網頁版滾輪往下還是看到導覽列上方空一行 阿~~~~頭好痛啊!!

    回覆刪除
  13. <7618921294896603603>(以上內容請勿刪除,從括號之後開始留言)我剛剛把本篇程式碼G行紅字的數據從 #PageList1 改回.tabs-fauxborder-left 之後捲動網頁變成導覽列跟網誌標題上方那個區塊一起捲動了! 這樣算成功了嗎?@@

    回覆刪除
  14. <314182370134557155>(以上內容請勿刪除,從括號之後開始留言)看來是的確是行動版導覽列跟網頁版導覽列黏在一起,必須在版面配置,將這兩個小工具隔開,才不會有空一行的問題!

    回覆刪除
  15. Wayne Fu您好 不好意思又要請教您問題
    我看到#2的發問,我也遇上相同問題
    我在版面配置裡面,在標頭跟導覽列之間有加入我需要的圖片
    安裝此版後出現此圖片也會跟著一起浮動
    麻煩Wayne Fu大,有空時幫我看一下協助該如何處理,謝謝您
    我的網址:http://mentor14901.blogspot.tw/

    回覆刪除
  16. <6529188119508131113>(以上內容請勿刪除,從括號之後開始留言)抱歉打擾了,我後來用您留言中所提到的改G欄,將裡面改為#PageList1已經解決此問題了!謝謝您的分享!!另外,回報一個使用心得,關於留言中提到的有空格問題,後來我自己使用將H欄改為-30,結果空白問題解決了!不知我這樣改是否可參考

    回覆刪除
  17. <3858360734282324556>(以上內容請勿刪除,從括號之後開始留言)不錯,問題解決了就好。Orsino 的空白是另一種狀況,而 H 行的參數,通常是很多人會隱藏官方最上方「下一個網誌」那個導覽列,就會留下 30px 的空白,因此設為 -30px,就可消去那 30px 的空白。

    回覆刪除
  18. Wayne Fu另外分享一個使用心得,以我上述所說的,我用-30px來處理空白問題,由於我使用的行動版為自訂,會因為我使用-30px的因素,在行動版上面此功能就會被往上縮減起來而導致消失,目前我自己的處理辦法是另外加入Wayne Fu您的另外一篇文章"快速回到頂端(Go Top)按鈕__符合使用者體驗的友善設計"來改善行動版無法迅速找到導覽列的問題!
    很感謝您的分享,這段期間看了好幾篇您的文章,受益良多,也麻煩您了,感謝您

    回覆刪除
  19. <1800257209539564442>(以上內容請勿刪除,從括號之後開始留言)原來如此,如果考慮到行動版的話,的確會出現這樣的狀況。那麼可以使用「Blogger 行動版範本初探__修改技巧整理」的判斷式技巧,將 H 行內容改為以下:

    <b:if cond='data:blog.isMobile'>
    topH = 0,
    <b:else/>
    topH = -30,
    </b:if>

    不過 C 行、O 行的內容就必須刪除,才能正常運作。

    回覆刪除
  20. <1571464798147110505>(以上內容請勿刪除,從括號之後開始留言)Wayne Fu大感謝!!剛剛改好之後確認行動版及桌面版都沒問題!!謝謝你!!

    回覆刪除
  21. <1571464798147110505>(以上內容請勿刪除,從括號之後開始留言)Wayne大你好,不好意思又要請教你問題,關於先前你協助我處理懸浮置頂有空白問題及行動版語法將H欄改為[quote]
    topH = 0,

    topH = -30,
    [/quote]
    確實已解決,不過有個問題就是加入此判斷式後,裡面最後的[quote][/quote]會變紅字
    雖然可以存檔,不過這對後續來說會不會發生甚麼問題??感謝你

    回覆刪除
  22. <6071820995623994616>(以上內容請勿刪除,從括號之後開始留言)對不起喔!!語法不見...最後的/b:if會變紅字

    回覆刪除
  23. <2785426874014766135>(以上內容請勿刪除,從括號之後開始留言)既然可以存檔的話就沒問題。如果不放心的話,請附上變紅字截圖,包含你修改的程式碼與前後的程式碼,來看看是什麼情形。

    回覆刪除
  24. <7087803352389550200>(以上內容請勿刪除,從括號之後開始留言)雖然已經正常執行一段時間,部過我還是不放心,以下是截圖的網址
    https://lh4.googleusercontent.com/-DoAjiP0AMjo/VAr4GDw7N1I/AAAAAAAA-WM/VmtiXxs0ve8/w973-h546-no/%E5%B0%8E%E8%A6%BD%E5%88%97%E5%95%8F%E9%A1%8C.png

    回覆刪除
  25. <4528891445037638426>(以上內容請勿刪除,從括號之後開始留言)看起來沒什麼問題,變顏色應該只是 blogger 沒把 bug 除完所產生的結果,範本中出現 &quot; 時,附近的程式碼顏色判定就可能異常 → 所以結論一樣,範本能存檔就不用擔心語法結構了,有問題的結構絕對無法存檔的~

    回覆刪除
    回覆
    1. 瞭解了!謝謝你的協助喔!

      刪除
  26. 你好,我今日也把主要的BLOGGER裝上了浮動導覽列選單,目前確定可以讓PAGELIST 1或2的其中一個正常使用。

    不過由於我的部落格有兩個PAGELIST,不知道能否同時讓兩個PAGELIST都固定住呢?

    我有嘗試把編碼複製成兩段,或是在G行第一個PAGELIST 1的逗號後面再多加一個PAGELIST 2也無法成功,反倒會讓兩個都失效,哈哈~

    另外一個問題就是,目前電腦網頁上都顯示的很清楚下拉選單,但在手機板上卻只看的到兩個【首頁】,不知道哪裡可以修正呢?

    謝謝

    部落格網址
    http://wanghenrytw.blogspot.com/

    回覆刪除
  27. <2671340033758134113>(以上內容請勿刪除,從括號之後開始留言)第一個問題:花錢寫客製程式

    第二個問題:搜尋本站「導覽列」相關文章,或爬一下「行動版」標籤的相關文章。

    回覆刪除
  28. 好的,謝謝回答~
    我的網頁還很小~~所以先自行研究為主,你的網頁幫助好大唷!再次謝謝~:)

    回覆刪除
  29. 你好,今日再修正底色的時候突然發現無法變更底色,連範本中自訂選項的時候也沒有反應。
    (底色無法變動、但文字可以,然後其他選項變動顏色也毫無反應)
    不知道問題點出在哪裡? 謝謝

    有問題之部落格 http://wanghenrytw.blogspot.com/

    PS:測試版的網頁也有座浮動的功能,但是卻可以正常編輯。

    回覆刪除
  30. <8695185341220227517>(以上內容請勿刪除,從括號之後開始留言)CSS 問題跟本文工具無關,請自行想辦法囉~

    回覆刪除
  31. 我發現問題點了,在這個教學的編碼中,
    ======================

    color = "#FFBB00", // 若導覽列有底色, 請留下雙引號 "" 即可;若導覽列底色為透明, 建議自行設定導覽列底色, 例如 #ffffff 代表白色

    =======================

    未安裝了這個功能之後,只能在這邊只能手動更改COLOR色碼,範本--自訂裡面的調整則沒有反應。

    這是我第一次安裝工具之後遇到的問題,不知道這樣子算是BUG,還是說本來就有可能因為安裝小工具而導致範本納編部分功能失常呢?

    謝謝

    回覆刪除
  32. <8812964279388830545>(以上內容請勿刪除,從括號之後開始留言)提供你自行測試的方法:

    1. 如果覺得這個工具有問題 → 把這個工具移除就知道問題是不是出在這

    2. 如果覺得「範本--自訂」有問題 → 可以開一個全新的部落格,如果新部落格沒問題的話,那就是目前的範本內容有問題,不曉得哪裡有動到。

    3. 如果沒有 html/css/js 基礎,從網路尋找各種免費資源來裝在範本中,除了有一定的機率會相互衝突,自己動到了哪些地方、會產生什麼影響,不一定知道,也不一定有 debug 能力 → 建議參考本站「備份範本」的相關文章,做好版本控制,會比較容易找出問題.

    回覆刪除
  33. 第一點我有移除了,【應該】也有移除乾淨,但狀況依舊,看來有可能是在之前一點的問題了。
    第二個我也有做,答案是新的部落格沒問題(這方面)
    第三個聽了你的意見之後我也有開始這樣子備份囉,然後要改檔名做記號,謝謝~

    目前主網頁連手機板的都變詭異了,所以只好先關閉手機板。

    另外想請問一下,我有注意到你的BLOGGER都是兩個欄位的版面,但我選的是三個欄位的版面的話,在插入小工具時是否會因此影響到嗎?謝謝~

    PS回報一下:我在BLOGGER的留言方式下按"回覆",結果新開了一個留言的頁面是G+的,但留言後這邊卻沒有顯示出來(G+那邊也沒有)

    回覆刪除
  34. 請問如何讓我的導覽列顏色一致?
    拉到最上面是白色的 然後浮動的狀態是灰色的
    我想要兩者一致都灰色
    http://flybird336.blogspot.tw/

    回覆刪除
  35. <849828178838633667>(以上內容請勿刪除,從括號之後開始留言)因為你的導覽列底色為白色,若要改成灰色,與本篇這個工具無關,這算是修改 CSS 的問題。

    由於導覽列的 CSS 修改很複雜,這方面只能採「個人/商業諮詢」的方式處理。

    回覆刪除
  36. 這個功能太妙了,居然連我的行動版都一起浮動了!! 雖然是下拉選單,但是能浮動起來,也算是更人性化了。

    回覆刪除
  37. <2823192698093147024>(以上內容請勿刪除,從括號之後開始留言)我不確定行動版的下拉選單,浮動之後的位置、效果好不好,如果不好的話,可以用判斷式,讓這個工具只在網頁版執行。

    回覆刪除
  38. 我按照了以上方法但還是無法成功啊 該怎麼辦呢

    回覆刪除
  39. <7441855932799075770>(以上內容請勿刪除,從括號之後開始留言)你沒提供足夠的資訊,我也不知道該怎麼辦...

    回覆刪除
  40. 請問網頁下面的區塊是什麼

    回覆刪除
  41. Wayne您好!我最近剛創了自己的Blogger,還在學習怎麼設計版面。我很喜歡浮動導覽列,但是插入程式碼後居然什麼事都沒有發生!我選的是Blogger官方的範本啊...另外您的還有李洛克大大的導覽列都有很多tab,但是我的只有“首頁”,沒有辦法在“cross column”加其他小工具,請問要如何解決呢?我的網址是http://jessiehandmade657.blogspot.com/

    回覆刪除
  42. <3750912650191757388>(以上內容請勿刪除,從括號之後開始留言)你好, 分成兩部分回答:

    [quote]插入程式碼後居然什麼事都沒有發生[/quote]

    檢查了你的程式碼,的確無法執行 → 可能你在複製過程出了問題,我看程式碼之間多了很多空格,不曉得你用什麼瀏覽器?建議使用 Chrome、Firefox 等主流瀏覽器來複製,把原本的程式碼刪了再重新裝一次看看。

    [quote]您的還有李洛克大大的導覽列都有很多tab,我的只有“首頁”,沒有辦法在“cross column”加其他小工具[/quote]

    增加 tab 的方法:後台 → 版面配置 → 編輯「網頁」小工具 → 接下來你應該就會操作了。

    回覆刪除
  43. 作者已經移除這則留言。

    回覆刪除

張貼留言注意事項:

◎ 勾選「通知我」可收到後續回覆的mail!
提問請附網址、詳細描述狀況,如提供的資訊不足,則無法回覆。
◎ 請在相關文章留言,與文章無關的主題請至「Blogger 中文論壇」。
◎ 若詢問 CSS 、非官方範本問題、或貴站為商業網站 ,請參考「本站諮詢頁面」→「1. 諮詢服務」
◎ 若留言要輸入語法,"<"、">"這兩個符號請用其他符號代替,否則語法會消失!
◎ 若發現留言不見了,通常是因為 "複製貼上" 的內容常被系統判定為垃圾留言,請不用擔心,我會定期將留言恢復。
◎ 本站「已關閉自刪留言功能」。