Blogger 下拉選單,建立下拉式多層選單導覽列

Blogger 筆記:建立下拉式多層選單導覽列。

前篇文章介紹使用小工具建立 Blogger 網頁導覽列,其優點是能簡單完成,缺點是看起來比較陽春,又無法分類整理各項連結,當連結數量過多時導覽列反而影響訪客瀏覽。想要改善這些缺點,可使用多層選單。

Blogger 建立下拉式多層選單導覽列

多數網站會使用多層下拉式導覽列,當滑鼠經過標籤文字時,自動展開下拉選單,將連結分類整理在下層選單,版面相對簡潔方便訪客瀏覽網站內容。網路搜尋可找到建立 Blogger 下拉選單教學,需修改 HTML 將 CSS 與 HTML 程式碼添加到版型。
操作說明:
編輯 HTML 前先備份範本(備份說明)。

Blogger 管理後台「主題」→「編輯 HTML」。
Blogger 建立下拉式多層選單導覽列

尋找關鍵字『]]></b:skin> 』,在上方增加選單樣式(CSS)程式碼。
Blogger 建立下拉式多層選單導覽列

點選「跳至小工具」→「Header1」。
Blogger 建立下拉式多層選單導覽列

在網誌名稱(標頭)這段程式碼結束的『</div> 』下方增加選單連結(HTML)程式碼。
Blogger 建立下拉式多層選單導覽列

網頁複製程式碼不方便,下載純文字檔案:【MediaFire】

選單樣式 CSS 程式碼:
/* Blogger 下拉選單 CSS */
#navMenu {
width: 960px; /* 外框寬度 */
height: 44px; /* 外框高度 */
margin: 0 auto 0;
padding: 0;
border-top: 1px solid #9a9a9a;/* 外框線條 */
border-bottom: 1px solid #9a9a9a;
border-left: 1px solid #9a9a9a;
border-right: 1px solid #9a9a9a;
background:#4899a0; repeat-x top;/* 背景顏色 */
}

#navMenuleft {
width: 960px;
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: #000000;
display: block;
text-transform: capitalize;
margin: 0;      /* 邊緣外距離 */
padding:8px 16px 8px;/* 邊緣內距離 */
font: bold 20px 'Microsoft JhengHei';/* 字型 :粗體 大小 字體 */
}

/* 第一層選單(選取時)設定 */
#nav li a:hover, #nav li a:active {
background:#6a6a6a;
color: #ffffff;
margin: 0;
text-decoration: none;
padding:8px 16px 8px;
font: bold 20px 'Microsoft JhengHei';
}

/* 第二層選單(子選單)設定 */
#nav li li a, #nav li li a:link, #nav li li a:visited {
background:#4899a0; repeat-x top;
width: 120px;
color: #00000;
//text-transform: lowercase;
float: none;
margin: 0;
border-bottom: 1px solid #9a9a9a; /*外框線條 */
border-left: 1px solid #9a9a9a;
border-right: 1px solid #9a9a9a;
padding: 8px 15px;
font: bold 16px 'Microsoft JhengHei';
}

/* 第二層選單(子選單選取時)設定 */
#nav li li a:hover, #nav li li a:active {
background: #6a6a6a; /* 背景顏色 */
color: #ffffff; /* 文字顏色 */
padding: 8px 15px;
font: bold 18px 'Microsoft JhengHei';/* 字型 :粗體 大小 字體 */
}
#nav li {
float: left;
padding: 0;
}

#nav li ul {
z-index: 9999;
position: absolute;
left: -999em;
height: auto;
width: 150px;
margin: 0;
padding: 0;
}

#nav li ul a {
width: 150px;
}

#nav li ul ul {
margin: -32px 0 0 180px;
}

#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;
}

程式碼中的幾行參數可自行調整,讓選單效果符合 Blogger 版型。
width: 960px; /* 外框寬度 */
height: 44px; /* 外框高度 */
margin: 0;      /* 邊緣外距離 */
padding:8px 16px 8px;/* 邊緣內距離 */
border-top: 1px solid #9a9a9a;  /* 外框線條 */
border-bottom: 1px solid #9a9a9a;
border-left: 1px solid #9a9a9a;
border-right: 1px solid #9a9a9a;
color: #ffffff; /* 文字顏色 */
background:#4899a0; repeat-x top;/* 背景顏色 */
font: bold 20px 'Microsoft JhengHei';/* 字型 */

選單連結 HTML 程式碼:
<div id='navMenu'>
<div id='navMenuleft'>
<ul id='nav'>

<li> <!-- 第一層-->
<a href='連結網址'>顯示文字</a>
</li>

<li><a>LINE</a> <!-- 第一層-->
<ul> <!-- 第二層-->
<li><a href='http://www.xiaoyao.tw/'>手機登出</a></li>
<li><a href='連結網址'>顯示文字</a></li>
</ul>
</li>

</ul>
</div>
</div>

參考文章:
PM Linux 好好玩實驗室: 在Google Blogger 中建立下拉式選單

張貼留言

17 留言

  1. 請問...手機版怎麼辦,目前試了,手機版沒有出現?

    回覆刪除
    回覆
    1. 你好:
      要在手機版顯示,手機版的主題要選擇『自訂』。

      刪除
  2. 您好,感謝您的教學,我成功在網頁上製作出下拉式選單。
    但目前使用手機觀看網頁,不知道是否是排版上的問題,只能看到前兩個選單,後面的選單手機上無法顯示。

    想請問您是否有甚麼方法可以解決這個問題,讓手機版更加清楚明瞭。

    回覆刪除
    回覆
    1. 歡迎來訪~
      這篇文章提供的程式碼不適合行動網頁,會超出版面也無法自適應大小。建議尋找"自適應版型",有免費版型或是付費購買,這些版型會有導覽列、文章分頁等功能。
      Blogger版型請參考:https://www.xiaoyao.tw/2018/02/Blogger-RWD.html

      刪除
  3. 版主您好。
    我在Google搜尋許久終於在您的網誌找到符合我的需求的文章。非常感謝。
    但是我沒有辦法建置成功多層次清單。
    請問我是不是漏了什麼步驟呢?

    以下描述我的狀況:
    我使用「連結清單」小工具,在網誌標題下方建立標籤。
    但是標籤要怎麼和我的文章分類連結呢?
    雖然我已經把您提供的程式碼貼在後台的HTML,但並沒有辦法啟用多層次清單。
    以下是我的網誌。敬請不吝賜教。感謝。
    https://littlegreenivy.blogspot.com/

    回覆刪除
    回覆
    1. 歡迎來訪~
      當你新增「連結清單」時(或新增後按下編輯)即可設定連結清單,會有標題、顯示的項目數、排序、連結清單四個項目,最後一個項目(連結清單)的右下有「新增項目」按鈕,點擊按鈕可以輸入網站名稱(要顯示的標籤名稱)、網站網址(標籤網址)。

      至於"下拉式選單"方面,檢視你的網頁原始碼沒有看到"選單連結設定",只有 CSS 程式碼,而你沒有添加 HTML 程式碼.請你將上文最後一張圖片放大檢視就能參考如何設定下拉式選單連結。

      刪除
    2. 抱歉,再補充說明"標籤要怎麼和我的文章分類連結呢?"
      以本文為例,發布這篇文章時我有套用「Blogger」標籤,你可以在文章最末端看到標籤,點擊標籤即可複製網址放到連結清單或下拉選單(HTML)。

      刪除
  4. 非常感謝版主詳細的解說。我繼續嘗試一下。晚點再跟您分享結果!

    回覆刪除
  5. 版主您好。我發現還是卡著QQ~
    套用「Blogger」標籤的部分,我原本的文章有套用多層次標籤,例如:[在偏鄉教書的日子][實習前準備]換位思考。
    我從部落格首頁右側點選標籤的時候,無法只點選[在偏鄉教書的日子][實習前準備],而必須點開最下層[在偏鄉教書的日子][實習前準備]換位思考,或是[在偏鄉教書的日子][實習前準備]人際互動。
    請問這樣是不是就無法讓它呈現多層選單了呢?

    不好意思,一直麻煩您。
    煩請撥冗指導,謝謝。

    回覆刪除
    回覆
    1. 不好意思,我想補問一下:如果可以點出[在偏鄉教書的日子][實習前準備]的網頁,目前的語法就讓導覽列的標籤自動呈現[實習前準備]的下一層內容嗎?
      這真是好深奧啊......

      刪除
    2. 或許你有點混淆了,針對你的問題,我臨時弄了個測試網站和說明,網址:
      https://xiaoyaotw-test.blogspot.com/

      刪除
  6. 逍遙版主您好。感謝您的逐步示範,我成功了!!!
    原來連結清單和下拉式選單是不一樣的東西,您真是一語驚醒夢中人。

    另外,我想請教下拉式選單如果想要有新的第二階層內容,一定要進去HTML修改,對嗎?
    我選擇多層次標籤的原因是因為後續編輯很容易,只要在文章寫好之後,套用那個標籤就好。檢視網誌文章分類的時候也可以讓架構一目了然。

    目前我的規劃是下拉式選單呈現精選集(給讀者快速查詢用),多層次標籤呈現則是讓我自己看(因為有些內容比較像我的備忘錄)。
    只是這樣就重複分類的感覺......

    回覆刪除
    回覆
    1. 是的,下拉式選單的連結要進入HTML修改,也能下載範本在電腦上修改編輯(Notepad++ 免費編輯器)。

      至於多層次標籤方面,只是小小建議最終仍然取決於你,不想重複分類也可以直接用多層次標籤網址,只是有部分選單無法添加連結。

      刪除
  7. 感謝逍遙版主的專業回覆,對我真的非常有幫助!
    我之後會常到您的部落格朝聖的~~

    回覆刪除
    回覆
    1. 您客氣了,剛好這個問題我能回答。近期已經較少寫有關 Blogger 的文章,當初也是為了幫自己留下筆記。既然已經成功解決,那麼我刪除測試網站囉!

      刪除
  8. 好的。非常感謝您為了解說,特地架了一個測試網站作解說。
    太感動了~

    回覆刪除