2011/6/14

[教學]在blogger建立下拉式導覽列

blogger加上導航列和高亮顯示當前頁面的導航列都會了,那麼下拉式(階層式)導覽列又要怎麼做呢?無須用javascript或其他外掛,僅需在CSS上定義blogger內建的標記值就可以輕鬆達成囉!一樣請務必記得在實做以前儲存完整範本,以下,就來step by step吧!


  • 首先,勾選展開小裝置範本→利用ctrl+F找到]]></b:skin>,在它前面加上下面這段程式碼(字體顏色不同的地方是圖片及色碼,都可以依照自家版型需求隨意替換)

/* ----- NAV MENU ----- */
#navMenu {
width: 910px;
height: 35px;
background:#deb8b8 url(https://ihbqkg.bay.livefilestore.com/y1p3aWC941BvpgFq8tPSKUpNp8l0MhmU7DAVl41DQ1BeKk8Z_u2q2zow8T3-QbOksv9mqdFZ-_Jb6407f99F_guWOiGUGOCWEUH/nav.gif) repeat-x top;
color: #b56666;
margin: 0 auto 0;
padding: 0;
font: bold 11px Century Gothic, Arial, Tahoma, Verdana;
border-top: 1px solid #debeb8;
border-bottom: 1px solid #FFFFFF;
}
#navMenuleft {
width: 680px;
float: left;
margin: 0;
padding: 0;
}
#nav {
margin: 0;
padding: 0;
}
#nav ul {
float: left;
list-style: none;
margin: 0;
padding: 0;
}
#nav li {
list-style: none;
margin: 0;
padding: 0;
}
#nav li a, #nav li a:link, #nav li a:visited {
color: #b56666;
display: block;
text-transform: capitalize;
margin: 0;
padding: 9px 15px 8px;
font: normal 15px Century Gothic, Times New Roman;
}
#nav li a:hover, #nav li a:active {
background:#deb8b8;
color: #b56666;
margin: 0;
padding: 9px 15px 8px;
text-decoration: none;
}
#nav li li a, #nav li li a:link, #nav li li a:visited {
background:#deb8b8 url(https://ihbqkg.bay.livefilestore.com/y1p3aWC941BvpgFq8tPSKUpNp8l0MhmU7DAVl41DQ1BeKk8Z_u2q2zow8T3-QbOksv9mqdFZ-_Jb6407f99F_guWOiGUGOCWEUH/nav.gif) repeat-x top;
width: 150px;
color: #000;
text-transform: lowercase;
float: none;
margin: 0;
padding: 7px 10px;
border-bottom: 1px solid #deb8b8;
border-left: 1px solid #deb8b8;
border-right: 1px solid #deb8b8;
font: normal 14px Century Gothic, Times New Roman;
}

#nav li li a:hover, #nav li li a:active {
background: #deb8b8;
color: #b56666;
padding: 7px 10px;
}
#nav li {
float: left;
padding: 0;
}
#nav li ul {
z-index: 9999;
position: absolute;
left: -999em;
height: auto;
width: 170px;
margin: 0;
padding: 0;
}
#nav li ul a {
width: 140px;
}
#nav li ul ul {
margin: -32px 0 0 171px;
}
#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul {
left: -999em;
}
#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul {
left: auto;
}
#nav li:hover, #nav li.sfhover {
position: static;
}


  • 再找到下面這段程式碼,若找不到就掐頭去尾留中間找找看類似區段
    (例如ctrl+F搜尋自己部落格名稱)
<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='你的部落格名稱' type='Header'/>
</b:section>
</div>
  • 在這段程式碼下方加上自訂義的下拉式導航列,
    不同顏色的標籤分屬不同階層(要幾層有幾層)

<div id='navMenu'>
<div id='navMenuleft'>
<ul id='nav'>
<li><a expr:href='data:blog.homepageUrl'>Home</a></li>
<li><a href='欲連結網址'>News</a></li>
<li><a href='欲連結網址'>Life</a>
<ul>
<li><a href='欲連結網址'>Parrot</a></li>
<li><a href='欲連結網址'>Cosmetics</a></li>
<li><a href='欲連結網址'>Internet</a></li>
<li><a href='欲連結網址'>Travel</a>
<ul>
<li><a href='欲連結網址'>Backpacking</a></li>
<li><a href='欲連結網址'>Tour</a></li>
</ul>
</li>
</ul>
</li>
<li><a href='欲連結網址'>Tips and Trick</a></li>
</ul>
</div>
</div> <!-- end nav -->



如果不要更動我的CSS,會呈現這樣

blogger下拉式導行列

點擊可放大




第一層

blogger下拉式導行列

點擊可放大




第二層

blogger下拉式導行列

點擊可放大



收工,有問題就留言吧:)。

54 則留言:

  1. 這個蠻方便的,我都不知道凱特還有一個專門用來展示的實驗室,我也要來改一改Blog了

    回覆刪除
  2. @小笠
    實驗室剛成立的啦XD
    這樣才不用冒險拿自己部落格做實驗咩^^

    回覆刪除
  3. 話說凱特的BLOG設計的真不錯,很有個人的風格...

    很多細節都有注意到(((拍手拍手!!

    尤其是每篇文章的第一個字..有吸引到我注意XD

    回覆刪除
  4. @達人幫 哪裡哪裡^"^謝謝啦!!

    回覆刪除
  5. 好喜歡這個功能,想請教一下,我copy試了一下之後,發現當滑鼠移到第一層時,第二層有顯現出來,但滑鼠要移到第二層時,第二層會自動收起來,無法點觸,請問是什麼原因呢?

    回覆刪除
  6. 凱特妳好~^^
    實在是很謝謝妳的這篇文,幫了好大的忙啊!!!!!
    但我有遇到個小小問題,
    摸了半天,實在不知從何改起~
    可以請凱特給點指引嗎????大感謝!!!!

    我下拉式導覽列設好後,
    回版去看,
    發現子導覽列與孫導覽列背景是透明的(主列背景正常),
    因為透明的關係,
    在下拉導覽時,
    字都會被後面的圖示給蓋過去,變的很不明顯....
    請問凱特,我可以從語法哪著手讓背景色不要是透明的呢????
    希望可以幫我這個忙,感謝感謝~~!!!
    PS:若是不瞭解我的問題,我方便mail網址給妳瞧瞧嗎??3Q^^

    回覆刪除
  7. @Snow's Zakka 不知道你問題解決了沒?有空會幫你看看^"^

    回覆刪除
  8. @Snow's Zakka 可以先mail網址給我喔!!!

    回覆刪除
  9. @Simon 可以給我網址嗎?我幫你看看:)

    回覆刪除
  10. @�ͯS����
    感謝你,我還沒建正式網址,目前測試用的是:
    http://simonbloggertest.blogspot.com
    而我猜想出問題的地方,可能是因為我把背景設定成固定,而前景透明,或許是這樣而有層次的關係,造成你這個漂亮的導覽列被較上層的蓋住了。

    回覆刪除
  11. 我發現使用IE9無法正常觀看...囧
    請問有什麼解決方式嗎?

    /PS
    凱特可以再來一篇實驗室新nav bar的攻略文嗎?
    那個好有質感!
    感謝

    回覆刪除
  12. 凱特妳好~
    我發現這個nav bar用ie9無法正常檢視,
    不知道有沒有修正辦法呢?

    ps:可以高抬貴指來一篇實驗室新版navbar的攻略文嗎?
    那個看起來好有質感耶

    感謝~

    回覆刪除
  13. 你好,我想請問一下,為什麼我的導覽列都會跑道網頁的最上方,而不是像版主一樣在中間?

    回覆刪除
  14. 親愛的版主~我如果放了這語法導覽列也會跑到最上方~~可以幫我看看嗎?我想在現有的其中兩個連結裡面加下拉選單~~http://9-tail-of-gecko.blogspot.com/ 非常感謝你QQ!!

    回覆刪除
  15. 請問一下,我想在我的BLOG連結清單中加入像你說的下拉導覽列,可是加入之後導覽列都會跑到網頁最上方,應該怎麼做呢?謝謝您

    回覆刪除
  16. @yoga liu我看到的是正常的耶~

    回覆刪除
  17. 請問如何在導覽列(menu bar)下放入標籤雲,就像www.skyvee.net那樣。

    回覆刪除
  18. 請問 URL 那一行需要換嗎?我是用blogger的

    回覆刪除
  19. 您好,請問設定時,按預覽時出現以下資訊,我該如何進行下一步呢?

    我們無法剖析您的範本,因為它的結構不完整。 請確定所有的 XML 元素均已正確關閉。 <br/> XML 錯誤訊息: The element type "li" must be terminated by the matching end-tag "</li>".
    Error 500

    回覆刪除
  20. @ZEN你有一個li後面沒有對應到/li結尾,檢查一下程式碼補上就可以囉!!

    回覆刪除
  21. 謝謝你詳細的解說~
    受益良多 :)

    回覆刪除
  22. 凱特您好...很感謝你提供了這個nav bar :)
    我找了好久才找到...
    但是我也跟上面幾個網友有同樣的問題
    nav bar跑到最上層而不是在中間
    html語法我也不懂...剛碰blogger而已
    能否麻煩你幫我解答該如何移動code之類的呢!?
    http://rockablepoki.blogspot.tw/
    感謝!!!

    回覆刪除
  23. 凱特大不好意思...我想請問一下不知道我前天的留言您有看到嗎?
    因為我一值沒看到我的留言有出現在頁面上~"~a
    是你要先同意才能看到嘛!?

    回覆刪除
  24. @Poki因為你那個欄位被"hi there"那一行佔了,沒地方跑只能跑到最上層,可以試試看把程式碼遺到"hi there"那一行的程式碼下方,還是不行的話就要捨棄那一行才可以喔!

    我原本也是完全都不會啦(我是法律系畢業的欸XD),試著自己摸索看看,這樣以後才可以改出自己想要的版型:)

    回覆刪除
  25. 哈哈是噢...好的那我再踹踹看。
    謝謝你kata大 :)

    回覆刪除
  26. hello 不好意思想請問
    我照版主的方法
    結果出現下面的續息↓

    ID 為 Header1 的小裝置不可包含此元素: "div". 小裝置只能包含 b:includable 元素。
    Error 500

    弄了半天一直做不出來(躺)

    請問版主知道可以怎樣解決嗎?
    或是我的語法可能有哪裡有寫錯?

    感謝你了!!!

    回覆刪除
  27. @Dreamon Yen看起來你是沒有放在]]></b:skin>前,用ctrl+f鍵找到]]></b:skin>,程式碼放在]]></b:skin>之前再試試吧:)

    回覆刪除
  28. @簡凱特

    已經成功了! 太感謝你了凱特打結!

    回覆刪除
  29. Dreamon Yen27/8/12 16:04

    hello 之前感謝你的解答
    不好意思現在我又來問問題了...
    想請請問版主有做到第五層過嗎?
    我做到「第五層」時 都會跟第四層同時出現
    第四層以前都沒問題
    下面是我用來測試的部落格
    →http://testofyen.blogspot.tw/

    從導航 music → rock → britpop 可以看到問題

    請問版主知道可能是哪裡出了問題嗎?
    不好意思問題很多... ~"~

    回覆刪除
  30. @Dreamon Yen不好意思,我沒做到第五層過XD,不過我剛剛爬了一下國外的文,因為這是純CSS的選單,不宜作太多層,要很多層的架構還是建議用JS或其他外掛來處理喔:)

    回覆刪除
  31. 凱特打結真的很感謝妳的分享~正好我的blog需要下拉式選單~~
    你的教學一目瞭然,語法又很好修改成自己想要的樣子~
    實在太感激妳了!!

    但我照著妳的步驟作之後,
    發現整個navmenu的bar位置不在我想要的地方
    可否mail給妳,請妳幫忙看看到底哪裡有問題呢?
    因為我的blog暫時是封閉的狀態,所以我會mail截圖給妳看~
    先感謝妳了
    煩請告訴我您的email address~~

    回覆刪除
  32. @GIXIA GROUP|Salem是不是沒有把程式碼放在]]>前,用ctrl+f鍵找到]]>,程式碼放在]]>之前再試試吧:)
    因為我目前正在坐月子,可能沒時間幫你研究XD
    email在關於我裡有喔!

    回覆刪除
  33. 請問導覽列要怎麼在每個選項間加上隔線,滑鼠沒有靠近,整條都是同一個顏色,選項都看不出分隔,我希望有線把她們隔開,讓選項變成一塊一塊的 謝謝

    回覆刪除
  34. @Jean Hsiung我文章有註明阿「字體顏色不同的地方是圖片及色碼,都可以依照自家版型需求隨意替換」

    回覆刪除
  35. @簡凱特我沒有使用圖片,是直接用顏色背景
    恩....我的意思是第一階導覽列的選項,左右可以有線條隔開嗎,雖然我有嘗試用border-left: 1px solid #999999;和border-right: 1px solid #999999;試,不過除了最左右的線,中間的線都會重合,也會連帶影響到下面的階層
    我想要的是像http://www.freegroup.org/這網站一樣,看起來一格一格的
    謝謝^^

    回覆刪除
  36. @Jean Hsiung不好意思,我最近忙翻天了,所以比較沒空去研究Orz,不過你可以參考梅老師的教學,有問題也可以問他,他非常專業喔,我只是業於純分享啦XD 梅老師文章在此

    回覆刪除
  37. 不好意思,路過才看到這篇文章,我想知道 blogger加上高亮显示当前页面的导航列如何做,您介紹的那篇文章在哪裡能看到?我的是新版部落格,我不知道我的導航列算不算高亮顯示,您可以幫看一下嗎?或者給我那篇文章的網址,謝謝......我的部落格 http://emarketing88.spotbolg.com

    回覆刪除
  38. 您好,昨天留言沒有看到,不知什麽原因,再發一次。您以前講過在 blogger加上高亮显示当前页面的导航列,我沒有找到這篇文章,所以求教于您,希望得到您的幫助。我的部落格現在的導航列是google自帶的,麻煩你抽時間看一看能否變成高亮顯示,謝謝。我的部落格 http://emarketing88.spotbolg.com

    回覆刪除
  39. 凱特您好,
    想請問現在blogger html編修已經沒有展開小裝置範本了.
    那要怎麼修改才有辦法製作下拉式導覽列呢?

    謝謝~

    回覆刪除
  40. @DieforFood-Fox一樣是這個步驟,它小裝置預設展開了

    回覆刪除
  41. 凱特小姐您好:
    不好意思打擾了,想詢問關於下拉選單語法的問題。照著往站上提供的步驟做後,第二階層無法正常顯示出來,會跟第一階層重疊,像是這裡主頁上Project的部份:http://nightowlpen.blogspot.tw/
    不知道要調整哪部份的語法能處理好這問題,能麻煩凱特小姐幫忙看一下嗎?
    非常感謝您
    祝事事順心

    回覆刪除
  42. i can't find the ]]> this..

    回覆刪除
  43. 跟着做了,效果很好。感謝!

    回覆刪除
  44. 凱特小姐您好:
    我是用google部落格的Cross-Column網頁,我有依你的步驟照做,可是沒出現下拉式導覽列 ,不曉得哪一步驟出問題,可以麻煩請你看一下嗎, 謝謝你
    http://jade0315.blogspot.tw/

    回覆刪除
    回覆
    1. 凱特小姐您好:感謝你提供這麼棒的教學,我嘗試了好幾次,終於依照你說的步驟用出來了,太開心了。
      只是我有問題,開"手機看"時會跳到行動板的,而不是網頁板的,有什麼辦法解決?我想要一直是網頁板的狀態,如果有的話可以告訴我嗎?
      是不是google部落格的Cross-Column網頁,無法這樣用?後來我將Cross-Column網頁關閉,
      謝謝您!!

      刪除
  45. 你好 凱特 恩在下實在弄不出來 像凱特導覽列有顏色的 實在是霧煞煞,不知道怎麼做漂亮呢?

    http://onlinepisk2.blogspot.tw/

    回覆刪除
  46. 凱特 版主 您好
    我有使用版主分享的下拉選單(因本身有套用其他範本,則再做選單時第二層..三層都不會收和)請問是哪有輸入錯誤 謝謝

    回覆刪除