公告版位

「下拉選單」是個從部落格建立以來便很想要的功能,不過大部分下拉選單除了安裝方式不容易,通常需要有 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> 這個字串,找到後在此字串的前一行,插入以下程式碼:

<< 請注意!以下為會員限定內容,請先加入會員>>

 

 

 

按此展開會員限定內容
請先加入會員



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

全文已移往WFU BLOG 主站,請點:「Blogger導覽列下拉選單__安裝懶人包

創作者介紹
創作者 Wayne Fu 的頭像
Wayne Fu

WFU BLOG

Wayne Fu 發表在 痞客邦 留言(97) 人氣()


留言列表 (97)

發表留言
  • ihsu
  • 謝謝你的文章
    不過我想問, 這個方法在手機上面使用, 是不是會沒有作用呢?
  • 摸泥可
  • 板主大人,第一次留言,首先我要表達感謝之意,您的部落格很實用講解也很詳盡,我網誌的導覽列和留言板,以及文章列表都是照著您的文章完成的。<(_ _)>

    下拉式導覽列也是我一直想要的功能,可是我照著這篇文章操作之後,雖然有下拉式導覽功能了,但原本的導覽列變得很奇怪,字和背景變得都全白,滑鼠移過去才會出現。最後我只好還原成原來版本。

    我有把當時的畫面截圖:http://ppt.cc/k9iZ

    不知道是我做錯了什麼才變這樣?是否有辦法解決呢?
  • Wayne Fu
  • <5908558364599925524>(以上內容請勿刪除,從括號之後開始留言)我想你指的是"Blogger行動版本"吧?基本上 Blogger 行動版連任何官方小工具都無法顯示了,所以你在手機上看不到任何工具是正常的現象。

    我猜你會問這個問題是本文提到"行動裝置"的效果,在這裡是指 NB、平板等行動裝置看"網頁版"的效果,而非"行動版"的效果。
  • Wayne Fu
  • <1344461762480883849>(以上內容請勿刪除,從括號之後開始留言)monica 你好~謝謝支持!很高興這麼多的小工具能被使用 :)

    由於沒有你的網址(簡介不存在),根據「三、參數修改」→「3. 有異常顯示的官方範本」→ 如果不方便透漏你家的話,至少請告知你用哪個官方範本、或用留言分頁的 "悄悄話" 留你的網址,才能看要如何修改 CSS。
  • Wayne Fu
  • <3478880041419026732>(以上內容請勿刪除,從括號之後開始留言)不好意思,原來是morningc~~官方的簡單範本裡面有七個範本,不過都跟你的配色不一樣,估計你有改過細部的顏色,例如文字你改成了白色,而不知什麼原因當背景色不見的時候,導致白色的文字看不出來。所以現在:

    1. 請你裝上本文的程式碼,保持出錯狀況,我才能進行測試。
    2. 為了暫時讓你的文字顯示,可以先將文字改成黑色,請到後台 範本 → 自訂 → 進階 → "標籤文字"及"標籤背景" 這兩個選項,將跟文字有關的都改成黑色

    以上完成後請通知我。
  • 摸泥可
  • <4200215864988180244>(以上內容請勿刪除,從括號之後開始留言)
    報告版主大人,我改好了~~
    請看:http://morningc725.blogspot.tw/
    外觀怪怪,但連接ok ,動作有些卡。
    再請我看看,感謝了!
  • Chester Chen
  • 我也裝好了... 不過,下方的線要怎麼加回去....
  • Wayne Fu
  • <4108767328109233289>(以上內容請勿刪除,從括號之後開始留言)我不懂你的意思...請描述完整一點~~
  • Wayne Fu
  • <8064576203377041056>(以上內容請勿刪除,從括號之後開始留言)好的,解決了,紀錄在「五、重要 FAQ」→「Q1」
  • Mark X
  • 懶人包是大家的最愛! XD
  • Chester Chen
  • <1845029331876555047>(以上內容請勿刪除,從括號之後開始留言)

    <a href="http://pcdn1.rimg.tw/photos/4319786_r7zdjaz_s.png" rel="nofollow">圖片</a>,我把邊框改成背景色,所以看不出來有啥問題,所以就借阿冠的來說明我的問題。
  • Wayne Fu
  • <7287926766557339979>(以上內容請勿刪除,從括號之後開始留言)1.你說的"外觀怪怪"大概是指選項太多,所以擠到第二行吧,那請刪掉一些選項,導覽列維持一行就行了。

    2. 「二、安裝程式碼」→「1. CSS 樣式」我修改了一點點程式碼,請重新安裝。

    3. 關於你背景色消失的問題,請在 .tabs-outer, .tabs-outer ul {...} 這個區間,插入一行程式碼 background-color: #666666;

    4. #666666 這個顏色就是你原本的底色,所以你可以考慮在程式碼 I 行填入這個顏色。

    如果 ok 請再回報,將補充到文末的 FAQ。
  • XYZ
  • <7522555145791411456>(以上內容請勿刪除,從括號之後開始留言)

    身為摸泥可的忠實讀者 XD
    我剛也研究了一下,不過還是晚了版主一步 XD
    效果如下
    http://imgur.com/5uTG2Pa

    我是修改
    /*新增 CSS*/
    .tabs-inner .widget li a{
    background-color: #666666; /* 選單背景色 */
    }
    .tabs-outer .tabs-inner{
    padding: 0 0 0 6px; /*上 右 下 左 的內距,修改原本內距,讓選單不擠到第二行*/
    }

    另外版主的 bgColor 顏色,我用 #999999
    bgColor = "#999999", // 下單選單的背景色

    話說 wayne Fu 的選單上三角形,也太帥了,我第一次看到這個神技 XD
  • Wayne Fu
  • <3370399994092767419>(以上內容請勿刪除,從括號之後開始留言)希望有機會看到您的懶人包~~~XD
  • Pan Kuan
  • <4354847056434897619>(以上內容請勿刪除,從括號之後開始留言)
    哈哈,我沒有想要下面有一條線,所以沒這困擾,嘻嘻!
  • Chester Chen
  • <4354847056434897619>(以上內容請勿刪除,從括號之後開始留言)

    這是 Google 對 <a href="http://pcdn1.rimg.tw/photos/4319818_11qm1n2_l.png" rel="nofollow"> http://www.bigsishead.com</a>,的快取(2014年2月6日)。我的不是官方範本?? 我使用blogger「簡單」之第二個範本。從去年8月一路改成這樣的......
  • Pan Kuan
  • 我沒有執著上下左右的線,所以沒這困擾,我在意的是網友能不能輕鬆在導覽列ㄧ目瞭然找到想看到東西,上面那條線不見也沒關係呀!
  • XYZ
  • <3937654131983855393>(以上內容請勿刪除,從括號之後開始留言)
    是指這樣嗎?
    http://imgur.com/RF6HNRu

    如果是的話,修改
    .tabs-outer, .tabs-outer ul{
    min-height:30px;
    }
  • XYZ
  • <5660042326180033667>(以上內容請勿刪除,以下引言請自行刪減) [quote]是指這樣嗎?http://imgur.com/RF6HNRu如果是的話,修改.tabs-outer,.tabs-outerul{min-height:30px;}[/quote]
    ㄟ...怕誤解,更正一下,不是"修改"
    是"新增" min-height:30px;
    到 .tabs-outer, .tabs-outer ul{....}裡面
    線不是不見,只是跑到上面,
    所以 pan Kuan 的線也可以加 min-height:40px; 移到下面
    不過我不確定 pan Kuan 的線原本在那邊 XD
  • Wayne Fu
  • <3937654131983855393>(以上內容請勿刪除,從括號之後開始留言)原來如此,謝謝提供訊息,那麼這個問題還是得解決!(應該就是 XYZ 提供的方法)

    只不過如您所述,您是修改過的範本,已經不是官方範本原本的樣貌,所以就不針對您的範本另外檢視了,原因都在「留言 #8」我提供的連結那篇公告裡面。
  • Wayne Fu
  • <122317234715511048>(以上內容請勿刪除,從括號之後開始留言)阿冠你也太不挑了...XD 我看有些範本的確沒有上面或下面的線,才以為你原本就少了框線~~既然會出現 bug, 我還是來補充一下 FAQ!
  • Wayne Fu
  • <3688934463476521934>(以上內容請勿刪除,從括號之後開始留言)阿冠的下方原本就沒有框線喔~另外,發現你的不是官方範本,所以要請你自己研究 CSS 怎麼改了,請參考導覽列最右邊的「關於/諮詢」→「<a href="http://wayne-fu.blogspot.tw/2013/06/service-suggest-cooperation.html" rel="nofollow">諮詢服務/提案合作</a>」→「5. 其他類諮詢」
  • Wayne Fu
  • <475837242661840699>(以上內容請勿刪除,從括號之後開始留言)這裡好多摸泥可的忠實讀者啊,我看阿冠也是追蹤者呢 :)

    @摸泥可, 就都試試看吧,我再決定 FAQ 怎麼補充。

    xyz , 過獎過獎,您的最新文章也很炫啊,第一次看到這樣的 idea ^^b
  • Wayne Fu
  • <4798789984816264908>(以上內容請勿刪除,從括號之後開始留言)謝謝您幫忙研究!不然也不知道還有 min-height 這個思路~

    Chester 的範本看來用 min-height 可以解決,而阿冠的範本由於他塞了其他小工具到 .tabs-outer 裡面,看起來要用別的解法,例如硬加 border,我再補充到 FAQ。
  • Chester Chen
  • <5660042326180033667>(以上內容請勿刪除,從括號之後開始留言)

    哇~~ 解決了耶
    謝謝 Wayne Fu 跟 XYZ 大神
  • 摸泥可
  • 我的下拉式選單完成了!!!
    謝謝版主大大和火星人大大。
  • Pan Kuan
  • <5777300556252310915>(以上內容請勿刪除,從括號之後開始留言)

    我來說明一下,我放的其實並不是原始的導覽列,我覺得那不太好用,我是拿"連結清單"起來當導覽列用,不知道這樣會不會在css上出問題?

    其實也不是不挑,而是我原本最想要的是沒有上下線,只想要左右線,但是掛上去就長這樣,就將就著用吧!
  • Jacky Lo
  • 太感謝Wayne Fu了!:)
  • Chester Chen
  • 有沒有辦法針對 黑底白色 設定下拉式選單,如果我用黑色底的導覽列,使用白色或明度高的顏色文字,下拉式選單背景就必須是深色 (我希望是白底黑字),我不管怎麼怎麼調都覺得怪怪的。

    總覺得文字看不清楚,有辦法修改導覽列文字的顏色嗎? <a href="http://pcdn1.rimg.tw/photos/4321078_rw42mbq_l.png" rel="nofollow">示意圖</a>

  • Wayne Fu
  • <5101986338650451430>(以上內容請勿刪除,從括號之後開始留言)可是我覺得有圓角的頁籤形狀不適合使用下拉選單說,版面、形狀不太好看~或許你可以把 I 行設定顏色的參數改為 "#b6d7a8",這樣會稍微好一些!
  • Wayne Fu
  • <918484955643725571>(以上內容請勿刪除,從括號之後開始留言)[quote]我是拿"連結清單"起來當導覽列用,不知道這樣會不會在css上出問題?[/quote]應該沒什麼差,我在「1. 建立導覽列」→「◎ 其他小工具」也有提到這樣的方法。
    [quote]我原本最想要的是沒有上下線[/quote]原來如此~也看過這種類型的導覽列,是可以利用「Chrome開發人員工具」找到修改上下邊框的 CSS 之處,只是Blogger導覽列找這個有點麻煩~><
  • Wayne Fu
  • <2265941331561137393>(以上內容請勿刪除,從括號之後開始留言)這個小工具完全沒有去動到文字顏色,系統預設什麼就會顯示什麼,所以你想改文字顏色的話,直接找相關的 CSS 改就行啦,或是去後台範本→自訂,那邊也能找到選項改。
  • 陳俊尾
  • 感謝Wayne提供這麼好的安裝方法,謝謝!
    不過我在我的部落格上安裝出現了一點小問題:
    <a href="http://blog.mixflavor.com/" rel="nofollow">http://blog.mixflavor.com/</a>
    這個下拉選單在我還沒把畫面移動到選單之下的時候,如果滑鼠指上去,下拉選單會變成上拉選單這點雖然不錯,可是點不到⋯⋯XD
    另外是如果我的選單在瀏覽器畫面中央的時候,選單也還是在上面,所以我還是一樣點不到。
    結果就變成一定得要我的選單浮動在最上端的時候才能點選,請教有解嗎~謝謝!
  • 陳俊尾
  • <1560726467059945203>(以上內容請勿刪除,從括號之後開始留言)

    我發現自己有點語意不詳XD
    簡單說,我希望下拉選單只能從「下面」出現!
  • Jacky Lo
  • <3311028067603477853>(以上內容請勿刪除,從括號之後開始留言)Wayne Fu, 太感謝你了, 真的好了喔!:)
  • Wayne Fu
  • <8307773420877993647>(以上內容請勿刪除,從括號之後開始留言)不客氣 ^^
  • Wayne Fu
  • <8310707122901236740>(以上內容請勿刪除,從括號之後開始留言)you're welcome~~
  • Wayne Fu
  • <889043683530579897>(以上內容請勿刪除,從括號之後開始留言)不錯不錯~
  • Wayne Fu
  • <1560726467059945203>(以上內容請勿刪除,從括號之後開始留言)看了你的情形,我很訝異竟然會變成 "上拉選單"...我在想還是修改一下本文的內容好了,因為你的不是官方範本,而我測試的環境為官方範本,所以這個小工具或許無法保證 "非官方範本" 下的執行效果...
  • Wayne Fu
  • <1504678969774918827>(以上內容請勿刪除,從括號之後開始留言)由於你有兩排導覽列,請試著先裝在下層的導覽列,看看是否會正常一點?
  • 陳俊尾
  • <9028343971609745894>(以上內容請勿刪除,從括號之後開始留言)
    Wayne,我的第二排導覽列是用標籤小工具,我把location = "#Label1", 沒有效果XD 看來暫時跟下拉選單無緣了~
  • Wayne Fu
  • <776155193765226816>(以上內容請勿刪除,從括號之後開始留言)其實正常的標籤小工具也是ok的,因為我的分站「三國志11」就是將標籤拉到導覽列。不過我看到你標籤小工具的 HTML 碼跟官方範本完全不一樣,所以你的範本算是"改得很徹底"了..XD(這樣就真的無法套用本文小工具了)

    不過非官方範本的話,可以使用其他的下拉選單工具,例如「<a href="http://wayne-fu.blogspot.tw/2012/04/blogger-trick.html" rel="nofollow">Blogger 小技巧</a>」→「水平功能選單」→「下拉選單」→ 就像 mark 介紹的那一個。

  • 陳俊尾
  • <5765108688464123094>(以上內容請勿刪除,從括號之後開始留言)
    瞭解,不過我的作業環境不是windows,所以就暫時無緣了~感謝,沒有下拉選單暫時沒關係XD
  • Pan Kuan
  • <6206706710275265287>(以上內容請勿刪除,從括號之後開始留言)
    我不是windows也完成了耶~~~
  • Wayne Fu
  • <4210384306447971960>(以上內容請勿刪除,從括號之後開始留言)
    我猜 陳俊尾 指的是 mark 介紹的那一項,需要下載軟體,而 陳俊尾 大概是用 linux 系統吧~
  • Chester Chen
  • 建議母選單超連結設定為 "javascript: void(0)"
    改用這個滑鼠不小心按下去,網誌後面也不會多出"#"

    經過行動裝置測試....
    <b>手機行動版:</b>按下去沒發生啥事,沒任何反應
    <b>手機電腦版:</b>母選單按下去沒任何反應,只顯示子選單
  • Wayne Fu
  • <9041379896685574420>(以上內容請勿刪除,從括號之後開始留言)
    出現 "#" 會有什麼不好的影響嗎? ^^
    設為 "javascript: void(0)" 除了字串變長,也要另外解析內容,都會耗費系統資源。
  • 鬥我無魂
  • 你好,這是我的網誌︰http://angelagain.blogspot.hk/
    請問為甚麼我的導覽列會偏向右邊?而且用IE看時甚麼都亂了,謝謝解答。
  • Wayne Fu
  • <2916319708641579802>(以上內容請勿刪除,從括號之後開始留言)我沒看到有裝下拉選單喔~而且你的導覽列我看沒什麼異常啊?或許你截個圖、附瀏覽器版本吧。
  • Orsino Sung
  • 我的部落格文章導覽列麼突然下拉選單消失了
    我甚麼都沒有動過~前幾天還好好的耶!

    我剛到處都找過了不知道是哪邊出了問題
    能否麻煩您抽空幫我看看?
  • Wayne Fu
  • <8796917925758242468>(以上內容請勿刪除,從括號之後開始留言)看了你的程式碼:

    menu["快速文章導覽] = ....

    "覽" 的右邊少了一個雙引號,所以程式當掉了。

    另外,我看到你目前的導覽列是「"面壁王愛3C"」,而程式碼設定的是「"面壁王與Android"」→ 這裡也要改一致,這個項目才能抓到選單喔~
  • Orsino Sung
  • Wayne謝謝你!

    我程式碼都那邊原本有改成目前導覽列顯示的面壁王愛3c那個的,但後來我有去版面配置裡面網頁把所有都刪除全部重新建立過,不知道是不是因為這個動作造成程式碼恢復到刪除網頁之前的狀態?

  • Wayne Fu
  • <6417815568947235415>(以上內容請勿刪除,從括號之後開始留言)抓到全部的錯誤點了,請注意程式碼P~T行的紅字提示:
    1. 你有某些項目沒用小寫逗號隔開
    2. 導覽列的選項名稱為 "哪裡可以找到面壁王" → 程式碼的選項名稱為 "哪裡可找到面壁王"

    所以程式碼的設定細節需要小心檢查囉~
  • Orsino Sung
  • 用小螢幕筆電真是讓我眼花不斷!
    謝謝你阿,我下次還是別用小螢幕的電腦改程式碼好了@_@
  • Orsino Sung
  • 我又來了@@

    我在修改文章標籤跟程式碼的時候發現到下拉導覽列點進去的搜尋文章只能搜尋"一個標籤"

    比如原來格式是http://www.wallfriendorsino.com/search/label/美食生活-精選下午茶-手工甜點

    我以為要搜尋兩個以上標籤就在後面新增新的標籤網址就好
    可是事實不是這樣=口=
    他還是只搜尋一個,而且會以最後新增的網址為主要蒐尋對象。

    請問這個導覽列下拉子選項每一個項目就只能搜尋一個文章標籤嗎?
  • Wayne Fu
  • <3942280406854852241>(以上內容請勿刪除,從括號之後開始留言)所以你的意思是,原本可以用你的方式一次搜尋兩個標籤,而這個下拉選單不行,對嗎? ^^
  • Orsino Sung
  • <6469205911337166901>(以上內容請勿刪除,從括號之後開始留言) 不是耶@@ 我原本也沒用成功一次搜尋多個標籤(在導覽列子目錄選單裡)

    所以才想詢問說能否實現在導覽列一個子選項可以搜尋"多個文章標籤"呢?

    因為不想一個文章標籤就一個子選項這樣下拉選單會變得烙烙長~_~
  • Wayne Fu
  • <2977204982920337155>(以上內容請勿刪除,從括號之後開始留言)由於樹狀標籤的字串,是利用程式處理,所產生的 "大分類"、"次分類" 等字串,實際上這些分類標籤並不存在,所以是無法搜尋的。

    [quote]能否實現在導覽列一個子選項可以搜尋"多個文章標籤"呢...不想一個文章標籤就一個子選項這樣下拉選單會變得烙烙長[/quote]

    1. 真的要做到這件事也不是不可行,用 js 寫得出來,只是看起來是個很客製化的需求,因此目前只能依客製的案子處理了~

    2. 有人想出用 CSS 做出無限層的下拉選單,可以 google 得到,不過也許你不會想用的,一來能否裝成功是個問題,二來沒有管理界面,日後也是很大的問題。

    3. 有個權宜之計,不想要選單變得很長,可以自己整理標籤,把數個標籤的文章,自己新增一個共同的標籤名稱(非樹狀標籤),然後放在下拉選單即可。

  • Orsino Sung
  • <1153411509055759824>(以上內容請勿刪除,從括號之後開始留言) 我現在就是被逼著要去逐步改變我的所有文章標籤

    因為既然下拉選單一個子選項只能放一個超聯結的話就只能這樣做了。 暫時是可以解決問題

    至於真正的樹狀下拉導覽功能等以後文章數量多了有需要的時候我再來委託專案給你吧:)
  • Wayne Fu
  • <4303400497682768134>(以上內容請勿刪除,從括號之後開始留言)也不必改變原有的標籤,為文章新增標籤就行了,你可以參考我的作法,在文末資訊區的標籤那一欄,除了樹狀標籤之外,我會安插正常的標籤。
  • Orsino Sung
  • <861951706175112384>(以上內容請勿刪除,從括號之後開始留言)哦~原來也可以那樣啊!! 這樣也不錯呢! 那就先這樣好了^^
  • 鄭智庭
  • 版大你好,我找不到網頁裡要改成最上層標籤的地方呢,另外已經把語法貼到HTML裡了,但是什麼都沒有?是哪裡出錯呢?現在我還原還沒加上你上面兩步語法的樣子,網址:http://0921498565.blogspot.tw/
  • Wayne Fu
  • <4929445952057373029>(以上內容請勿刪除,從括號之後開始留言)你好,一方面你的網頁鎖右鍵,不方便看原始碼,一方面檢查了一下,感覺你好像還沒安裝本文的程式碼,所以不知道出了什麼問題。

    另外不好意思,由於您的網站偏向商業性質,會傾向這是商業諮詢,可能要麻煩按導覽列的「關於/諮詢」→「<a href="http://wayne-fu.blogspot.tw/2013/06/service-suggest-cooperation.html" rel="nofollow">諮詢服務/提案合作</a>」→ 下方有我的 email 聯絡資訊、或聯絡表單,謝謝!
  • Z.s
  • 請問有辦法在導覽列上加入官方小工具嗎?
    還有有辦法讓每一個選項設置不同的圖片嗎?
  • 花蓮液晶維修
  • 版主大人好.
    按步驟插入相關CODE後, 沒有預期的功能選單出現. 曾試著移除標籤及公告小工具, 仍然無法顯示您預設的功能表單. 可否請版大幫忙看一下, 感謝!
    這個部落格是用來記錄我與小孩成長歷程的. 非營業網站.
    http://9ihualien.blogspot.tw/search/label/weebly
  • Wayne Fu
  • <1132938019958095205>(以上內容請勿刪除,從括號之後開始留言)看了你的網頁原始碼:
    1. 參數完全沒修改喔,你用的完全是我的預設參數,這樣下拉選單是不可能跑出來的,請詳細閱讀參數修改說明。
    2. 你的導覽列設了兩個,所以已經不是原本單純的原始官方導覽列狀態,因此 G 行的參數一定要改成你要出現下拉選單的那一個導覽列。
    3. 請參照留言 #18 的回覆,你的頁籤形狀不適合拿來當下拉選單~
  • Andy.com
  • Wayne Fu大, 在使用了您的懶人包後, 真的是變好看了很多, 但有個問題想問一下, 您提供的是從主目錄→子目錄

    那如果我想要主目錄→子目錄→子目錄這樣的話, 若以Fu大的導覽列來說, 網站導覽→如何使用本站→子目錄

    如果是這樣該怎麼設定呢!?
  • Wayne Fu
  • <1853374581584952631>(以上內容請勿刪除,從括號之後開始留言)這個小工具只能提供一層的子目錄喔~如果想要使用多層子目錄,可以考慮安裝「<a href="http://www.wfublog.com/2013/01/multi-tree-label-update.html" rel="nofollow">多層樹狀標籤</a>」,就像我側邊欄的「文章分類」。(熱門文章第一篇)
  • Hongdae One House
  • 謝謝您的教學文章,學到了很多
    但是想學得更深入
    請問多層式選單的話要怎麼製作呢?
    謝謝您
  • Wayne Fu
  • <1208516387947463231>(以上內容請勿刪除,從括號之後開始留言)你好,這個問題跟樓上(留言#38)一樣,請看上面我的回覆。另外,如果熟悉 HTML 的話,可以 google 多層下拉選單,來自行製作,非常麻煩就是。
  • Hongdae One House
  • <6198119057999901412>謝謝版主的意見^^(以上內容請勿刪除,從括號之後開始留言)
  • Hudson Gao
  • 版主您好!不好意思又來打擾,我看語法從頭看到尾,還是厚著臉皮來問了...^^a
    想請問下拉選單中的三角形要怎麼去除掉呢(子選單上頭的那個三角形,不是可以自己設定符號或圖樣的那個)?因為我的母選單字太短,三角形會跑到別的地方去,看起來怪怪的...

    那東西看起來是個向上的箭頭,但是不知道到底是從哪邊設定進去的?還煩請版大開釋!
  • Wayne Fu
  • <7980596517498987540>(以上內容請勿刪除,從括號之後開始留言)1. 那個三角頂端是用 CSS 畫出來的,請見「五、重要 FAQ」→「Q1」即可去除

    2. 你的導覽列項目有點窄,可以下拉選單的寬度可以設窄一點,或是把導覽列項目設寬一點,這樣就比較好看啦~
  • Hudson Gao
  • <4051784514594008164>(以上內容請勿刪除,從括號之後開始留言)謝謝板主回覆!原來是我自己沒有看清楚內文....後續我會再依板大建議調整寬度,再次感謝 :)
  • 書
  • 版主您好:感謝您提供的教學,我成功製作下拉選單了。
    但有一個小問題是,下拉選單的連結都會開新視窗。想請教是否有辦法在原視窗開啟連結呢?
    正在測試的網址為:http://socialhousingtw.blogspot.tw
    感恩 :)
  • Wayne Fu
  • <7516831983723827482>(以上內容請勿刪除,從括號之後開始留言)你好,請在程式碼中搜尋字串 target='_blank' 然後刪除此字串即可
  • 書
  • <525443336920674260>(以上內容請勿刪除,從括號之後開始留言)
    感謝Wayne Fu大~
    我把target='_blank'刪掉後,下拉選單會出不來。但改成target='_self'就可以了。
  • Wayne Fu
  • <8760778198527985648>(以上內容請勿刪除,從括號之後開始留言)你可能誤刪了其他字元,導致js當掉,下拉選單才會出不來。當然,改成target='_self' 也是一種解法。
  • ling0210
  • 版大您好,看了您這篇文章,我試著將所上研討會的blogger做了下拉選單 但有個問題想和您請教

    選單在「相關活動」那邊,但是為什麼我將滑鼠移過去

    並非像版大您的blogger的選單,是方型的色塊,而是呈現橢圓(?)的形狀?

    不知道能不能麻煩版大您幫我看看是何處有問題?謝謝!
  • Wayne Fu
  • <2850540035420207708>(以上內容請勿刪除,從括號之後開始留言)看了你的網頁,圓角頁籤不適合使用下拉選單,你可以參考留言 #18 的回覆,自行更改底色為適當的顏色試試看~
  • Gan En
  • 您好,感恩您的资讯!但是为什么我在修改html里面,找不到body 的。。(T.T)
  • Wayne Fu
  • <8099061273547008294>(以上內容請勿刪除,從括號之後開始留言)我猜你不常修改範本吧~記得閱讀文章內提到的「備份範本的訣竅」 ^^

    必須滑鼠點進Blogger範本區塊內,再按 Ctrl-F 才能真正搜尋到需要的字串。
  • 阿滴
  • 版大你好,我試著你的方式去做修改...原本可是跑下拉選單跑不出來,可以請問一下是什麼原因嗎??

    http://blissdean.blogspot.tw/
  • 阿滴
  • 版大你好,不好意思打擾了,我已經解決了 ^^"
  • Chinyen Cheng
  • 板大您好~
    我做的下拉式選單裡英文的空格跑不出來,字與字之間會連在一起,
    請問要怎麼解決呢?
    以下是我的連結,謝謝您~~

    http://lyonchinyen.blogspot.tw/
  • Wayne Fu
  • <501109751654281215>(以上內容請勿刪除,從括號之後開始留言)請見程式碼 P~T 行「2014.12.2 補充」。
  • Chinyen Cheng
  • <8323235480189420110>(以上內容請勿刪除,從括號之後開始留言)板大好~看不道您補充後的需增加的編碼內容耶~
  • Wayne Fu
  • <2276595668855253540>(以上內容請勿刪除,從括號之後開始留言)啊~沒注意編碼內容會轉譯無空白字元,已更正為字串 " "
  • Chinyen Cheng
  • <2067498730521091784>(以上內容請勿刪除,從括號之後開始留言)謝謝您,已經成功!!
  • 方舟
  • 版大你好,打擾了!我是blogger初學者,看了這篇介紹的下拉導覽很期待自己的博客這樣,
    但是我不到< / b o d y >語法...XDD,我使用的範本-圖片視窗右1,請版大幫幫忙。
    還有,我的範本有修改過,目前處於錯誤中!
    http://akuhausu.blogspot.tw/這是我的網址,感謝你了!
  • Wayne Fu
  • <878324893284699462>(以上內容請勿刪除,從括號之後開始留言)找不到 </body> 是很常見的問題,只要「游標點進範本區塊」再搜尋就能找到了~
  • 方舟
  • 版大你好,感謝回覆!在範本區搜尋不到才發此問題的,能否有方法可以解決呢?<6165518431379898285>(以上內容請勿刪除,從括號之後開始留言)
  • Wayne Fu
  • <651805056665988212>(以上內容請勿刪除,從括號之後開始留言)對了,你試試看用 ctrl-f 搜尋 body 這個字串, 應該只會有兩個結果, 這樣就能看到 </body> 了
  • kuen-xuan Lian
  • 好複雜喔!