逍遙の窩

我懂得不多;分享我懂的。

2018/01/07

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

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

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

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




操作說明:
編輯 HTML 前先備份範本(備份說明)。

Blogger 管理後台「主題」→「編輯 HTML」。


尋找關鍵字『]]></b:skin> 』,在上方增加選單樣式(CSS)程式碼。


點選「跳至小工具」→「Header1」。


在網誌名稱(標頭)這段程式碼結束的『</div> 』下方增加選單連結(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 程式碼:
<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 中建立下拉式選單

沒有留言:

張貼留言

聲明:
● 站內提供下載的軟體經由網路取得,版權皆屬於原創者(公司)。
● 影音下載介紹網站與軟體功能,隨意下載、散播影片可能觸法,請自行注意。
● 本站採用CC授權請勿全文轉貼本站文章,歡迎"部份引用"並註明出處。