2015年4月30日

Blogger 多層下拉選單實作

A+
blogger-drop-down-menu-multiple-level前陣子處理一個案子,需要在 Blogger 安裝多層下拉選單,說真的這不是一個輕鬆的任務,因此值得記錄一下過程,減少日後重新摸索的時間。

一般而言,如果像本站屬於主題集中、文章數幾百篇的規模,應該使用單層的下拉選單就足夠,太多層的下拉選單對於讀者而言,其實在尋找資訊時不是那麼直覺與方便。可考慮使用「Blogger下拉選單安裝懶人包」,不必瞭解語法也能安裝;如果網站文章需要大量的分類項目,也可另外使用「多層樹狀標籤」。

不過如果網站的主題多元,或是大型購物網站,或是大型旅遊部落格,或是文章多到像「電腦玩物」這樣的規模(數千篇),那還真的需要「多層下拉選單」來輔助導覽。

在 Blogger 裝多層下拉選單的難處不少,會進行簡單說明,想先看效果請點這個以下網頁:




一、多層下拉選單的難處


1. 多層下拉選單教學

這篇「如何用純 CSS 製作無限階層的下拉選單」詳細說明了製作多層下拉選單的原理,有 HTML/CSS 的基礎就能自己做出無限層下拉選單。

不過 Blogger 有自己的預設 CSS 參數,若將這篇的語法直接搬來 Blogger 的導覽列使用,除了自己得美化版面,還得找出 CSS 會打架的地方。


2. 現成下拉選單套件

國外有一些現成的下拉選單套件包,可以直接下載來用,例如參考 +Mark X 這篇「BLOGGER 下拉式選單」的教學,或是直接從國外下拉選單官網尋找合適的樣式:


同樣的,直接套用在 Blogger 可能會版面大亂,需要有堅強的 CSS 修改實力做後盾,來讓下拉選單正常運作。



二、CSS 範例


本文記錄的多層下拉選單樣式,出處為「Apple Light Drop Down Menu」,這個套件其實只能顯示單層下拉選單,WFU 將這個套件的語法改成能夠顯示多層下拉選單。要將這個效果安裝到自己 Blogger 的話,請按以下流程。

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

到後台「範本」→「編輯 HTML」,游標點進範本區塊,按 Ctrl-F 搜尋 </head> 這個字串,找到後在此字串的前一行,插入以下程式碼:

<style>
/*下拉選單 start*/
#dropMenu ul, #dropMenu li, #dropMenu span, #dropMenu a {
margin: 0;
padding: 0;
position: relative;
}
#dropMenu:after, #dropMenu ul:after {
content: '';
display: block;
clear: both;
}
#dropMenu a {
color: #333333;
display: inline-block;
font-family: 'Lucida Grande', 'Lucida Sans Unicode', Helvetica, Arial, Verdana, sans-serif;
font-size: 14px;
min-width: 35px;
text-align: center;
text-decoration: none;
text-shadow: 0 -1px 0 #eeeeee;
}
#dropMenu ul {
list-style: none;
background: none!important;
overflow: visible!important;
z-index: 10;
border: none!important;
}
#dropMenu &gt; ul &gt; li {
float: left;
}
#dropMenu &gt; ul &gt; li.active &gt; a {
background: #d9d9d9 url(http://2.bp.blogspot.com/-o_z6JrMNzkg/VRPtCtXxTNI/AAAAAAAALZw/bag3Q6eUhSY/s1600/grad_light.png) repeat-x left bottom;
background: -moz-linear-gradient(top, #d9d9d9 0%, #bfbfbf 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #d9d9d9), color-stop(100%, #bfbfbf));
background: -webkit-linear-gradient(top, #d9d9d9 0%, #bfbfbf 100%);
background: -o-linear-gradient(top, #d9d9d9 0%, #bfbfbf 100%);
background: -ms-linear-gradient(top, #d9d9d9 0%, #bfbfbf 100%);
background: linear-gradient(to bottom, #d9d9d9 0%, #bfbfbf 100%);
filter: progid:dximagetransform.microsoft.gradient(startColorstr='#d9d9d9', endColorstr='#bfbfbf', GradientType=0);
box-shadow: inset 0 0 10px #979797, inset 0 10px 10px #979797;
-moz-box-shadow: inset 0 0 10px #979797, inset 0 10px 10px #979797;
-webkit-box-shadow: inset 0 0 10px #979797, inset 0 10px 10px #979797;
filter: none;
}
#dropMenu &gt; ul &gt; li.active a:hover {
background: -moz-linear-gradient(top, #d9d9d9 0%, #bfbfbf 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #d9d9d9), color-stop(100%, #bfbfbf));
background: -webkit-linear-gradient(top, #d9d9d9 0%, #bfbfbf 100%);
background: -o-linear-gradient(top, #d9d9d9 0%, #bfbfbf 100%);
background: -ms-linear-gradient(top, #d9d9d9 0%, #bfbfbf 100%);
background: linear-gradient(to bottom, #d9d9d9 0%, #bfbfbf 100%);
filter: progid:dximagetransform.microsoft.gradient(startColorstr='#d9d9d9', endColorstr='#bfbfbf', GradientType=0);
filter: none;
}
#dropMenu &gt; ul &gt; li a {
box-shadow: inset 0 0 0 1px #ffffff;
-moz-box-shadow: inset 0 0 0 1px #ffffff;
-webkit-box-shadow: inset 0 0 0 1px #ffffff;
background: #bfbfbf url(http://2.bp.blogspot.com/-o_z6JrMNzkg/VRPtCtXxTNI/AAAAAAAALZw/bag3Q6eUhSY/s1600/grad_light.png) repeat-x left top;
background: -moz-linear-gradient(top, #ffffff 0%, #e5e5e5 50%, #d7d7d7 51%, #ededed 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ffffff), color-stop(50%, #e5e5e5), color-stop(51%, #d7d7d7), color-stop(100%, #ededed));
background: -webkit-linear-gradient(top, #ffffff 0%, #e5e5e5 50%, #d7d7d7 51%, #ededed 100%);
background: -o-linear-gradient(top, #ffffff 0%, #e5e5e5 50%, #d7d7d7 51%, #ededed 100%);
background: -ms-linear-gradient(top, #ffffff 0%, #e5e5e5 50%, #d7d7d7 51%, #ededed 100%);
background: linear-gradient(to bottom, #ffffff 0%, #e5e5e5 50%, #d7d7d7 51%, #ededed 100%);
filter: progid:dximagetransform.microsoft.gradient(startColorstr='#ffffff', endColorstr='#ededed', GradientType=0);
border-bottom: 1px solid #d2d2d2;
border-top: 1px solid #d2d2d2;
border-right: 1px solid #d2d2d2;
line-height: 34px;
padding: 0 16px;
filter: none;
}
#dropMenu &gt; ul &gt; li a:hover {
background: #ffffff url(http://2.bp.blogspot.com/-o_z6JrMNzkg/VRPtCtXxTNI/AAAAAAAALZw/bag3Q6eUhSY/s1600/grad_light.png) repeat-x left bottom;
background: -moz-linear-gradient(top, #d9d9d9 0%, #bfbfbf 50%, #b0b0b0 51%, #c7c7c7 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #d9d9d9), color-stop(50%, #bfbfbf), color-stop(51%, #b0b0b0), color-stop(100%, #c7c7c7));
background: -webkit-linear-gradient(top, #d9d9d9 0%, #bfbfbf 50%, #b0b0b0 51%, #c7c7c7 100%);
background: -o-linear-gradient(top, #d9d9d9 0%, #bfbfbf 50%, #b0b0b0 51%, #c7c7c7 100%);
background: -ms-linear-gradient(top, #d9d9d9 0%, #bfbfbf 50%, #b0b0b0 51%, #c7c7c7 100%);
background: linear-gradient(to bottom, #d9d9d9 0%, #bfbfbf 50%, #b0b0b0 51%, #c7c7c7 100%);
filter: progid:dximagetransform.microsoft.gradient(startColorstr='#ffffff', endColorstr='#ededed', GradientType=0);
filter: none;
}
#dropMenu &gt; ul &gt; li:first-child a {
border-radius: 5px 0 0 5px;
-moz-border-radius: 5px 0 0 5px;
-webkit-border-radius: 5px 0 0 5px;
border-left: 1px solid #d2d2d2;
}
#dropMenu &gt; ul &gt; li:last-child a {
border-radius: 0 5px 5px 0;
-moz-border-radius: 0 5px 5px 0;
-webkit-border-radius: 0 5px 5px 0;
}
#dropMenu &gt; ul &gt; .has-sub:hover &gt; ul {
display: block;
}
#dropMenu .has-sub ul {
display: none;
position: absolute;
left: -1px;
min-width: 100%;
text-align: center;
}
#dropMenu li .has-sub:hover &gt; ul {
display: block;
position: absolute;
top: 0;
left: 100%;
}
#dropMenu .has-sub ul li {
text-align: center;
}
#dropMenu .has-sub ul li a {
border-top: 0 none;
border-left: 1px solid #d2d2d2;
width: 140px;
display: block;
font-size: 14px;
line-height: 120%;
padding: 9px 10px;
text-align: left;
}
/* 下拉選單 end*/
</style>

多層下拉選單 CSS 如何修改的原理就不多說了,請直接參考前面給的相關教學文章連結,有詳細的說明。



三、安裝 HTML


請到 Blogger 後台 → 版面配置 → 新增小工具 → 選擇「HTML/JavaScript」→ 填入標題、以及以下程式碼:


存檔後,請將這個小工具拉到導覽列的位置,這個多層下拉選單才能出現在導覽列上。

如果要調整選單內容的話,請對照展示網頁的效果,參照以上程式碼行號,閱讀後續說明。



四、調整選單內容


1. 修改通則

  • 每個項目的網址,請填入 HTML 碼之中 "網址" 這個字串的位置即可
  • 選單文字、及項目的文字,請自行修改
  • 全部的項目都已經縮排整理,將來自行刪減時,也建議保持這個縮排格式,以免編修錯誤,造成選單無法執行。

2. 三種樣式

這個範例設計了七組選單,每個區塊都是 <li> 開頭、</li> 結尾,複製時小心不要弄錯了。

第 1 組為 C 行,通常設定為首頁連結。

第 2 組、第 3 組都是「單層下拉選單」,分別為 D~KL~S 行。

drop-down-menu-one-level


第 4 組、第 5 組都是「多層下拉選單」,分別為 T~AJAK~BA 行。

drop-down-menu-two-level


第 6 組、第 7 組都是「無選單項目」,分別為 BBBC 行。

不需要的組別,按以上行號刪除即可。需要增加的組別,一樣建議按照以上提示的行號來複製,然後再來修改細節,免生枝節。

由於本篇並非安裝懶人包,如果不熟悉 HTML 的話,建議別自己來,交給專家處理比較妥當。



五、補充


雖然本文提供的範例,在 WFU BLOG 的展示網站可以正常執行,但不太代表在所有 Blogger 網站都是一樣的情形,尤其非官方範本更是需要自行調整 CSS。建議具備一定的 CSS 基礎再來自行修改。



六、常見 FAQ


日後若有常見問題,會持續補充在此。

Q1: 請問如何改變選單的背景色?

Ans: 這個下拉選單的背景色,是利用一張透明圖片來設定,請按以下步驟:
  • 找到安裝程式碼中的這個圖片網址:http://2.bp.blogspot.com/-o_z6JrMNzkg/VRPtCtXxTNI/AAAAAAAALZw/bag3Q6eUhSY/s1600/grad_light.png → 一共有三處
  • 請按這張透明圖的格式,自行用影像編輯軟體,製作出同樣尺寸、格式的透明圖,改成自己想要的顏色
  • 上傳圖片、取得圖片網址後,將三處 png 網址都換成新的圖片網址即可。


Q2: 下拉選單裡面的項目,CSS 預設是靠左,請問如何改為置中?

Ans: #dropMenu .has-sub ul li a 裡面的預設參數 text-align: left; 改成 text-align: center; 即可。


Q3: 標籤頁面下拉選單會按不到?

Ans: 這是留言 #4 遇到的狀況,原來標籤頁面,"顯示包含「XXX」標籤的文章" 的這個區塊,設定了很大的 z-index 值, 導致會覆蓋下拉選單。請按下面的步驟修改這個區塊的 z-index 值:

後台範本 → 自訂 → 進階 → 新增 CSS,填入以下內容──

.status-msg-body{z-index: 1;}

Q4: 留言 #8 表示下拉選單無法顯示

Ans: HKDSE00 自行找到原因,原來是他的範本中 .tabs-outer 設定了 overflow: hidden; → 把這一項設定刪除即可。


Blogger 導覽列相關技巧:

41 則留言:

  1. 報告!css 部分最後一個 style 標籤沒有關門喔!然後這個多層 html 繞的我眼花了 XD

    回覆刪除
    回覆
    1. 感謝 Ala 回報!已更正 ^^
      是的,我暫時也還沒準備挑戰多層下拉選單~~XD

      刪除
  2. 感謝!我是部落格新手,好多問題想問 :) 多層下拉選單終於成功了。但是我只能改動字體和字的顏色,卻改不了選單的背景色,可以幫忙看看嗎?感恩!
    我的部落格是: http://ourfashland.blogspot.hk/
    另外底部的圖片如何可以置中呢? 感謝!

    回覆刪除
    回覆
    1. 你好,已經提問補充到「六、常見 FAQ」→ Q1
      另外,"底部的圖片如何可以置中呢" → 不懂你的意思呢,如果熟悉 CSS 的話,可以 google "CSS 圖片 置中",會有不少語法教學。

      刪除
    2. 感恩!我研究看看。我的部落格底部的圖片都是靠右的,我想放在中間,要怎麼做呢?謝謝!
      還有您上面的這個網址 http://2.bp.blogspot.com/-o_z6JrMNzkg/VRPtCtXxTNI/AAAAAAAALZw/bag3Q6eUhSY/s1600/grad_light.png,我按下去打不開。
      謝謝,百忙中回復。感恩!

      刪除
    3. 放在中間的問題,我剛剛搞定了,謝謝!

      刪除
    4. "http://2.bp.blogspot.com/-o_z6JrMNzkg/VRPtCtXxTNI/AAAAAAAALZw/bag3Q6eUhSY/s1600/grad_light.png,我按下去打不開" → 這個圖片網址不是用按的,貼到瀏覽器網址列,就能另存圖片了。

      刪除
  3. 請問如何將此"下拉式選項"置中呢?,先感謝!

    回覆刪除
    回覆
    1. 可調整 CSS,把 #dropMenu .has-sub ul li a 裡面的 text-align: left; 改成 text-align: center;

      刪除
  4. BLOG: http://fungtesting001.blogspot.hk
    你好!我已經成功弄好多層下拉選單!
    但當我在其他頁面想按選單就按不到
    例如:我進入了主題特色裡的mall mall 系列,但當想去其他頁面 下拉選單就彈出用不了
    麻煩可以幫忙看看嗎?

    回覆刪除
    回覆
    1. 你好,看了提供的頁面,原來標籤頁面,"顯示包含「XXX」標籤的文章" 的這個區塊,設定了很大的 z-index 值, 導致會覆蓋下拉選單。

      我把解決方法整理到「六、常見 FAQ」→ Q3,請按說明進行應該就可以了。

      刪除
    2. 謝謝喔!問題已經解決了!

      刪除
  5. 您好,
    想請問一下,我上網找款式來更換卻失敗了,不知道問題在哪
    我把標籤設AA,這款放在Cross-Column裡,就無法正常顯示,除非我把資訊壓窄,讓欄位變長,他才有辦法顯示,若不拉長則像AA-1那款,完全無法下拉。但是若把他放到footer-1裡,他卻可以正常運作,沒有問題。

    我還有事您的教學,我把他編號為BB,這款不管放在Cross-Column或footer-1裡,都可以正常顯示,謝謝您的撰寫,非常好用!!

    這是我的部落格網址http://bke1238886.blogspot.tw/,希望您能撥能幫我指點一下,謝謝

    回覆刪除
    回覆
    1. 你好,看了提供的網頁,本篇的下拉選單沒什麼問題。

      至於其他款覺得有問題的下拉選單,因不是本站發佈的內容,不會特別幫忙處理 CSS 問題。

      CSS 相關問題請見 http://www.wfublog.com/2013/06/service-suggest-cooperation.html →「1. 個人諮詢/服務/教學」→ 第 2 點

      刪除
  6. 你好,我的下拉式選單出現「自動展開」的情形,請問要怎麼解決?
    我的網頁:http://www.bastetcj50.com/

    回覆刪除
    回覆
    1. 我沒看到問題,也許你已經解決了吧~

      刪除
  7. 想問一下~完成後要怎麼把文章放進對應的選單內?

    回覆刪除
    回覆
    1. 文章有說明,你要先熟悉 HTML 語法,才比較瞭解怎麼做。

      刪除
    2. 不好意思 新手問題比較多
      1.使用你範例給的CSS語法,可以改選單的長寬嗎?
      2.
      首頁
      我已經在首頁的表單內放入一篇文章的連結
      但如果要放第二篇文章在表單內該怎麼做呢?

      刪除
  8. 版主你好,我看了很多你的文章,真的很有用,感謝。
    不過我再裝這個下拉選單時不知如何解決這個問題,
    我的下拉選單看來和範本的css相撞(?!),
    這是我的blogger
    http://mvbck.blogspot.hk/
    能指點下我嗎,謝謝!!!

    回覆刪除
    回覆
    1. 看了你的網頁,你已經自行修改過 CSS 了,而非原本的效果喔,那麼 CSS 的問題要請自行解決了,可參考下方的留言注意事項。

      刪除
    2. 我已發現問題了,是blogger 範本中overflow: hidden,我一直都是按着你的文章修改,這看來真被範本的css遮住了,不過謝謝版主抽時間看我的網站^_^
      /* Tabs
      ----------------------------------------------- */
      .tabs-outer {
      overflow: hidden;
      position: relative;
      background: $(tabs.background.color) $(tabs.background.gradient) repeat scroll 0 0;
      }

      #layout .tabs-outer {
      overflow: visible;
      }

      .tabs-cap-top, .tabs-cap-bottom {
      position: absolute;
      width: 100%;

      border-top: 1px solid $(tabs.border.color);

      }

      .tabs-cap-bottom {
      bottom: 0;
      }

      刪除
    3. 謝謝提供經驗,已補充到「六、常見 FAQ」→ Q4 ^^

      刪除
  9. 回覆
    1. "選單 可以置中" → 我的選單沒有置中喔,所有選單都是靠左的,這是正常現象

      "跟隨頁面捲動" →「讓部落格導覽列選單能浮動置頂」:http://www.wfublog.com/2013/12/blogger-floating-navigation-menu-bar-update.html

      "廣告使用網路教學的指令達到可以跟隨頁面捲動" → 別亂來喔,你會被停權的:http://www.wfublog.com/2013/08/blogger-floating-side-column.html →「四、錯誤示範及提醒」

      刪除
    2. 作者已經移除這則留言。

      刪除
    3. 作者已經移除這則留言。

      刪除
  10. 回覆
    1. 你有裝我的「浮動導覽列」程式碼嗎?我沒看到喔

      刪除
    2. 作者已經移除這則留言。

      刪除
    3. 作者已經移除這則留言。

      刪除
    4. 你沒有裝「浮動導覽列」程式碼,裝的是別的版本。
      請將目前的程式碼移除,改裝「浮動導覽列」程式碼,還有問題請在該篇文章留言。

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

      刪除
  11. 回覆
    1. 請見下方留言注意事項,請留言在相關主題的文章,所有與文章無關的主題請至「Blogger 中文論壇」。

      刪除
  12. 你好,新手报到!
    想要把选单的背景变透明色 还有字体颜色(如上面的导览列)http://momowuyuxiaocaopin.blogspot.my/
    要怎么样弄呢? 十分感谢

    回覆刪除
    回覆
    1. 你好,可參考「六、常見 FAQ」,然後,調整 CSS 設定的問題請自行解決喔。

      刪除

張貼留言注意事項:

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