2014年2月1日 星期六

[教學]Blogger導覽列下拉選單﹍安裝懶人包

[教學]Blogger導覽列下拉選單﹍安裝懶人包

Wayne Fu 0 A+
「下拉選單」是個從部落格建立以來便很想要的功能,不過大部分下拉選單除了安裝方式不容易,通常需要有 HTML 基礎才比較能成功;且另外比較麻煩的是,下拉選單很難具備管理性,也就是日後想調整選單內容、順序時,是個不太輕鬆的工程。

以上便是這篇安裝懶人包的源由,使用這個工具沒有語法基礎也能輕鬆安裝。另外本篇比較少見沒有先說明原理,因為私心偏好做了個 "三角頂端" 的選單形式,其原理十分複雜,需要專文解釋才清楚,如果想瞭解原理的讀者請再留言了,這樣目前可減少一些篇幅另外說明。(2014.12.30補充:三角頂單的原理可參考「簡單漂亮的 CSS 提示框(tooltip)懶人包實作」→「一、CSS tooltip 製作原理及參考資料」→「3. 三角尖端效果」)



一、準備動作


基本上,部落格得先建立導覽列,才能使用本篇的下拉選單小工具。因此只要你的網頁或部落格有導覽列,理論上無論是否為 Blogger 平台應該都可試著安裝。不過由於測試環境為 Blogger 官方範本,如果非官方範本、或範本有修改過、或其他平台,由於變數太多,可能無法保證執行效果。以下步驟依照 Blogger 平台來說明:

1. 建立導覽列

◎ 網頁小工具:

Blogger 最簡單的方法就是使用「網頁」小工具當導覽列,請先到後台 → 版面配置 → 將「網頁」小工具拉到導覽列。如果沒有找到這個小工具,請新增這個小工具。


◎ 其他小工具:

許多官方小工具,例如「標籤」、「連結清單」等等,都能在後台 → 版面配置 的畫面,用滑鼠拖曳到導覽列的位置。可參考這兩篇「將 Blogger "標籤"小工具放在導覽列實作」、「Blogger 如何安裝兩個導覽列?」。


2. 更改超連結

本篇下拉選單的效果為「滑鼠移到選單時,自動顯示下拉選單」,這樣的效果在 PC 上沒有任何問題,但行動裝置由於 "沒有滑鼠",必須 "點擊選單" 才能讓下拉選單顯現

因此行動裝置會產生一個問題 → 若原本的選單有超連結,點擊後會另開新視窗。

因此建議導覽列上、有下拉選單的項目,其超連結設定為井字符號 "#",這樣在行動裝置上就不會另開視窗了。需要操作步驟的話可參考「在 Blogger 功能選單使用語法產生動態效果」→「一、使用方式」的圖片,在網址的部分填上 "#"。



二、安裝程式碼


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


1. CSS 樣式

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

<style>
.tabs-outer, .tabs-outer ul {
overflow: visible !important;
max-height: none !important;
}
.dropMenu li{
display: block;
position: relative;
margin: 0px !important;
padding: 0px !important;
border: none !important;
}
.dropMenu a{
display: block;
text-decoration: none;
border: none !important;
padding: 5px !important;
height: auto;
}
.dropMenu {
top : 45px;
left: -20px;
text-align: left;
position: absolute;
z-index: 100;
margin: 0px !important;
padding: 5px !important;
border: none !important;
border-radius: 4px;
box-shadow: 0px 0px 10px rgba(0, 0, 0, .2);
display: none;
}
.dropMenu:after {
width: 0;
height: 0;
border-left: 140px solid transparent;
border-bottom: 15px solid transparent;
content: '';
position: absolute;
left: 0px;
top: -15px;
}

.dropMenu li:first-child:after {
width: 0;
height: 0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
content: '';
position: absolute;
left: 50%;
top: -15px;
margin-left: -10px;
}
</style>


2. 主程式碼

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


以上的參數如何修改,請見後面的說明。



三、參數修改


請對照以上的程式碼行號──

1. 基本參數修改

G:如果是 Blogger 官方的範本,這一行通常不需要改,導覽列區塊就是在這裡;如果不是官方範本、改過範本或配置的話,可參考「Google Chrome 開發人員工具」來找到導覽列的區塊,然後置換本行字串 ".tabs-outer"──
  • 如果要填入區塊的 id,請填入 "#" + id 名稱,例如 "#navbar"。
  • 如果要填入區塊的 class,請填入 "." + class 名稱,例如 ".navbar"。

H:如果下拉選單字串會被斷行的話,表示預設數值 120 不夠大,建議調整為更大的數字,直到不會斷行為止。

I:"#e6e6fa" 字串為預設的下拉選單背景色,可參考這個網頁「網頁色碼選擇器」來更改色碼預設值。

J:可自訂下拉選單的提示圖案,也可使用圖片(改為圖片網址即可)。


2. 自訂下拉選單內容

這裡即為下拉選單的管理介面,O~UW~Z 行為兩個範例──

O:紅字 "網站導覽" 請置換為自己導覽列上的選單字串

P~T:
  • 藍色字串請置換為自訂的下拉選單項目名稱
  • http 開頭的網址請置換為自訂的超連結
  • 名稱與網址之間請用蚯蚓符號 "~" 隔開,有空格沒關係,比較能清楚辨識,程式處理時會自動去除空格。(2014.12.2 補充:如果名稱需要使用空白符號,請使用編碼 &nbsp;)
  • 每個項目之間請用小寫逗號 "," 隔開,最後一個項目之後不可有逗號。

在 AC 行之前要插入幾個項目都可以,可複製 P~T 行的格式來修改,並自行增減項目。

想要對照效果請看本站畫面上方的浮動導覽列即可。


3. 有異常顯示的官方範本

由於官方範本很多,無法一一測試所有的狀況,若有發現顯示不正常的情形,或許是該範本使用了特殊的 CSS 設定,請另外留言回報狀況,再看看 CSS 如何調整即可。



四、小結


這個安裝懶人包比起一般需要處理 HTML 碼的方式算是方便許多,而如果懂 CSS 的話,還可自行修改「二、安裝程式碼」→「1. CSS 樣式」,讓自己的下拉選單與眾不同。

另外這個下拉選單也支援「浮動導覽列」,而浮動導覽列的優點請見「這篇說明」,因此建議一併安裝,可為部落格加分不少。



五、重要 FAQ


由於官方範本有很多個,這個小工具不一定能相容所有官方範本 CSS,因此在這裡摘要各種狀況的解決方式。以下提供的 CSS 程式碼修改請對照「二、安裝程式碼」→「1. CSS 樣式」。

Q1: 留言 #4 +Pan Kuan 表示 "希望下拉背景是白色" → 當背景為白色的時候,三角頂端的效果不太好。

Ans: 調整了部份程式碼,請重新安裝,然後將以下這一大段內容刪除 ".dropMenu li:first-child:after {.....}",這樣可以去除三角頂端。


Q2: 留言 #6  Chester Chen 表示 "導覽列下方的框線不見了"。

Ans: 由於 Blogger 官方範本導覽列的框線很搞怪,很多都是用組合式的呈現方式,也就是說框線的 CSS 不一定存在於單一元素,所以很難找到一個統一修改法來套用所有範本。

◎ 可以先試試 留言#14 XYZ 提供的方法,在 .tabs-outer, .tabs-outer ul{....} 的區間內新增程式碼:

min-height: 30px;
30 這個數值請視自己的導覽列高度來修改,而如何得知導覽列的高度,可使用「Google Chrome 開發人員工具」。

◎ 如果不行的話,只好手動幫導覽列加上框線,請在程式碼 <style> 的下一行插入:

.tabs-outer a {
border-bottom: 1px solid #000000;
}

這段範例代表加上「下框線(border-bottom)、黑色、實線、1px(寬度)」,請根據自己的版面狀況增加或調整參數、或增加其他的樣式。


Q3: 留言 #2 摸泥可 表示 "原本的導覽列變得很奇怪,字和背景變得都全白,滑鼠移過去才會出現"

Ans: "導覽列變得很奇怪" 大概是指選項太多所以擠到第二行,那麼刪掉一些選項,讓導覽列維持一行就可以了。另外,如果發生了底色消失、字又剛好是白色,就會發生選單消失的異狀,可參照以下的解決方式:

◎ 在 .tabs-outer, .tabs-outer ul {...} 這個區間,插入一行程式碼

background-color: #666666;
"#666666" 這字串請使用自訂的色碼,可使用「Pixeur超好用的抓取色碼軟體」來找出原本底色的色碼。

◎ 原本的程式碼 I 行建議填入跟上面這一項一樣的色碼字串。


Q4: 留言 #20 陳俊尾 使用了非官方的範本,出現了異常的 "上拉選單" → 那麼非官方範本怎麼裝下拉選單?

Ans: 如果你不是官方範本、且使用了本文的小工具後沒有效果,那麼可參考其他下拉選單工具,例如「Blogger 小技巧」→「水平功能選單」→「下拉選單」→ 就像 mark 介紹的那一個。


Q5: 留言 #38、39 詢問能否使用「多層下拉選單」?

Ans: 這個小工具只能提供一層的子目錄喔,如果想要使用多層子目錄,可以改安裝「Blogger 多層下拉選單」。


Q6: 留言 #49 詢問「下拉式選單裡英文的空格跑不出來,字與字之間會連在一起,請問要怎麼解決呢」?

Ans: 請見程式碼 P~T 行的「2014.12.2 補充」。


Q7: 留言 #43 詢問「下拉選單的連結都會開新視窗。想請教是否有辦法在原視窗開啟連結呢?」

Ans: 請在程式碼中搜尋字串 target='_blank' 然後刪除此字串即可。


Blogger 導覽列相關技巧:
0 0
如這篇文章對你有幫助,歡迎「分享」到 FB、「追蹤」粉絲團、「訂閱」最新文章
TOP