「下拉選單」是個從部落格建立以來便很想要的功能，不過大部分下拉選單除了安裝方式不容易，通常需要有 HTML 基礎才比較能成功；且另外比較麻煩的是，下拉選單很難具備管理性，也就是日後想調整選單內容、順序時，是個不太輕鬆的工程。以上便是這篇安裝懶人包的源由，使用這個工具沒有語法基礎也能輕鬆安裝。另外本篇比較少見沒有先說明原理，因為私心偏好做了個 "三角頂端" 的選單形式，其原理十分複雜，需要專文解釋才清楚，如果想瞭解原理的讀者請再留言了，這樣目前可減少一些篇幅另外說明。
一、準備動作
基本上，部落格得先建立導覽列，才能使用本篇的下拉選單小工具。因此只要你的網頁或部落格有導覽列，理論上無論是否為 Blogger 平台應該都可試著安裝。不過由於測試環境為 Blogger 官方範本，如果非官方範本、或範本有修改過、或其他平台，由於變數太多，可能無法保證執行效果。以下步驟依照 Blogger 平台來說明：
1. 建立導覽列
◎ 網頁小工具：
Blogger 最簡單的方法就是使用「網頁」小工具當導覽列，請先到後台 → 網頁 → 將網頁顯示為 "最上層標籤"
◎ 其他小工具：
許多官方小工具，例如「標籤」、「連結清單」等等，都能在後台 → 版面配置 的畫面，用滑鼠拖曳到導覽列的位置。可參考這兩篇「將 Blogger "標籤"小工具放在導覽列實作」、「Blogger 如何安裝兩個導覽列？」。
2. 更改超連結
本篇下拉選單的效果為「滑鼠移到選單時，自動顯示下拉選單」，這樣的效果在 PC 上沒有任何問題，但行動裝置由於 "沒有滑鼠"，必須 "點擊選單" 才能讓下拉選單顯現。
因此行動裝置會產生一個問題 → 若原本的選單有超連結，點擊後會另開新視窗。
因此建議導覽列上、有下拉選單的項目，其超連結設定為井字符號 "#"，這樣在行動裝置上就不會另開視窗了。需要操作步驟的話可參考「在 Blogger 功能選單使用語法產生動態效果」→「一、使用方式」的圖片，在網址的部分填上 "#"。
二、安裝程式碼
1. CSS 樣式
請到後台「範本」→「編輯 HTML」，搜尋
<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;
}
.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. 主程式碼
接著請搜尋
- <!-- Blogger 下單選單懶人包 start -->
- <script>
- //<![CDATA[
- (function () {
- var init = function () {
- var $ = jQuery,
- location = ".tabs-outer", // 下拉選單區塊
- width = 120, // 下單選單寬度(px值)
- bgColor = "#e6e6fa", // 下單選單的背景色
- menuLogo = "▼", // 下拉選單圖示，可填入字元或含 "http" 開頭的圖片網址
- height = $(location + " li").height(),
- menu = {},
- i, x, l, html, info, item, url;
- menu["網站導覽"] = [
- " 本站HACK及工具 ~ http://wayne-fu.blogspot.com/2012/09/wfu-blog-hacks-and-tools.html",
- " 文章列表 ~ http://wayne-fu.blogspot.com/2012/04/demo-toc-date.html",
- " 如何使用本站 ~ http://wayne-fu.blogspot.com/2012/12/how-to-use-wfu-blog.html",
- " BLOGGER新手指引 ~ http://wayne-fu.blogspot.com/2013/04/blogger-guide-note.html",
- " 避免使用IE8 ~ http://wayne-fu.blogspot.com/2012/08/stop-using-IE.html"
- ];
- menu["GOOGLE"] = [
- " GOOGLE試算表 ~ http://wayne-fu.blogspot.com/search/label/電腦- Google 相關-Google 試算表",
- " GOOGLE+ ~ http://wayne-fu.blogspot.com/search/label/電腦- Google 相關-G＋ 相關",
- " GOOGLE工具 ~ http://wayne-fu.blogspot.com/search/label/電腦- Google 相關-Google 工具"
- ];
- $("head").append("<style>" + location + " li {position: relative;}" + location + " ul li:hover > .dropMenu {display: block;}.dropMenu{background-color:"+bgColor+" !important; top:"+(height+10)+"px !important;} .dropMenu li:first-child:after{border-bottom: 10px solid "+bgColor+" !important} .dropMenu:after{border-left:"+(width+20)+"px solid transparent !important}</style>");menuLogo=menuLogo.search("http")==-1?menuLogo:"<img src='"+menuLogo+"'/>";for(x in menu){l=menu[x].length;html="<ul class='dropMenu'>";for(i=0;i<l;i++){info=menu[x][i].replace(/ /g,"").split("~");item=info[0];url=info[1];html+="<li><a href='"+url+"' style='width:"+width+"px;' target='_blank'>"+item+"</a></li>"}html+="</ul>";$(location+" a:contains("+x+")").filter(function(){return $(this).text()===x}).html(x+" "+menuLogo).after(html)};},getScript=function(c,a){var b=document.createElement("script");if(b.readyState){b.onreadystatechange=function(){if(b.readyState=="loaded"||b.readyState=="complete"){b.onreadystatechange=null;if(a){a()}}}}else{b.onload=function(){if(a){a()}}}b.src=c;document.documentElement.firstChild.appendChild(b)};if(typeof jQuery==="undefined"){getScript("http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js",init)}else{init()};
- } )();
- //]]>
- </script>
- <!-- Blogger 下單選單懶人包 end, Design by WFU BLOG -->
以上的參數如何修改，請見後面的說明。
三、參數修改
請對照以上的程式碼行號──
1. 基本參數修改
G：如果是 Blogger 官方的範本，這一行通常不需要改，導覽列區塊就是在這裡；如果不是官方範本、改過範本或配置的話，可參考「Google Chrome 開發人員工具」來找到導覽列的區塊，然後置換本行字串 ".tabs-outer"──
- 如果要填入區塊的 id，請填入 "#" + id 名稱，例如 "#navbar"。
- 如果要填入區塊的 class，請填入 "." + class 名稱，例如 ".navbar"。
H：如果下拉選單字串會被斷行的話，表示預設數值 120 不夠大，建議調整為更大的數字，直到不會斷行為止。
I："#e6e6fa" 字串為預設的下拉選單背景色，可參考這個網頁「網頁色碼選擇器」來更改色碼預設值。
J：可自訂下拉選單的提示圖案，也可使用圖片(改為圖片網址即可)。
2. 自訂下拉選單內容
這裡即為下拉選單的管理介面，O～U 及 W～Z 行為兩個範例──
O：紅字 "網站導覽" 請置換為自己導覽列上的選單字串
P～T：
- 藍色字串請置換為自訂的下拉選單項目名稱
- http 開頭的網址請置換為自訂的超連結
- 名稱與網址之間請用蚯蚓符號 "~" 隔開，有空格沒關係，比較能清楚辨識，程式處理時會自動去除空格。
- 每個項目之間請用小寫逗號 "," 隔開，最後一個項目之後不可有逗號。
在 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 介紹的那一個。
source:
http://wayne-fu.blogspot.tw/2014/02/blogger-drop-down-menu-easy-installation.html
沒有留言:
張貼留言
請留言,謝謝囉！Thank you.