Zi 字媒體
2017-07-25T20:27:27+00:00
Blogger 筆記：建立下拉式多層選單導覽列。
前篇文章介紹使用小工具建立 Blogger 網頁導覽列，其優點是能簡單完成，缺點是看起來比較陽春，又無法分類整理各項連結，當連結數量過多時導覽列反而影響訪客瀏覽。想要改善這些缺點，可使用多層選單。
多數網站會使用多層下拉式導覽列，當滑鼠經過標籤文字時，自動展開下拉選單，將連結分類整理在下層選單，版面相對簡潔方便訪客瀏覽網站內容。網路搜尋可找到建立 Blogger 下拉選單教學，需修改 HTML 將 CSS 與 HTML 程式碼添加到版型。
操作說明：
編輯 HTML 前先備份範本(備份說明)。
Blogger 管理後台「主題」→「編輯 HTML」。
尋找關鍵字『]]> 』，在上方增加選單樣式(CSS)程式碼。
點選「跳至小工具」→「Header1」。
在網誌名稱(標頭)這段程式碼結束的『 』下方增加選單連結(HTML)程式碼。
網頁複製程式碼不方便，下載純文字檔案：【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 程式碼：
顯示文字
LINE
手機登出
顯示文字
參考文章：
PM Linux 好好玩實驗室: 在Google Blogger 中建立下拉式選單
寫了
5860316篇文章，獲得
23313次喜歡