Julius-TESTDEMO: [教學] 階層式水平導覽列

教學寫在 DEMO 這邊
是因為這邊比較容易理解這東西的優點
在我的個人網誌中所使用的標籤太過抽像不夠直覺化
簡單的來說就是個人風格太重
看不出這東西的優點

正好因為某個原因需要一個 DEMO
所以做出一個教學在這邊放著
往後本網誌將不再繼續更新

原理

由大地理區 → 小地理區
這種方式在於寫旅遊網誌時的分類會十分的方便
只需要寫到三個階層
就可以一目瞭然的尋找文章標籤、依標籤找文
除此之外在對於營利型的網站幫商品分類也十分的方便
其它的應用就請訪客自行發揮想像力的去創造其應用的價值了
那麼以下就是要寫其教學

原創作者文章：參考網誌 ACG&I 在Blogger建立下拉式導覽列

依照我個人的需要改了一點東西放在自己的個人網誌與這個 DEMO 網誌之中
分為兩個部份 (這邊教學寫的是這個 DEMO 網誌用的，兩者差不多)
第一部分為 CSS 將以下整段放在範本中 /b:skin 上方
(只要放在 b:skin 與 /b:skin 皆可作用)

/* ----- NAV MENU ----- */
/*導覽列*/
#navMenu {
width:1100px; /*寬度*/
height: 38px; /*高度*/
background:#a1a1a1
color: #a1a1a1; /*底色顏色*/
margin: 0 auto 0;
padding: 0;
font: bold 11px Century Gothic, Arial, Tahoma, Verdana;
/*顯示列上下邊距設定(不需要可移除border-top和border-bottom兩列*/
border-top: 1px solid #debeb8;
border-bottom: 1px solid #FFFFFF;
}
#navMenuleft {
width: 780px; /*第一階母選單可容納的寬度*/
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: #FF9D37; /*文字顏色*/
display: block;
margin: 0;
padding: 9px 15px 8px;
font: normal 15px Century Gothic, Times New Roman;
}
/*導覽列動作選擇顯示*/
#nav li a:hover, #nav li a:active {
background:dimgray; /*停留時選項背景要變更的顏色*/
color: #FDFF37; /*停留時選項文字要變更的顏色*/
margin: 0;
padding: 9px 15px 8px;
text-decoration: none;
}
/*子選單*/
#nav li li a, #nav li li a:link, #nav li li a:visited {
background:#a1a1a1 repeat-x top; /*子選單背景(如果不使用圖片當背景，僅使用顏色背景可以把底線部分全移除*/
width: 72px; /*寬度*/
color: #000000; /*文字顏色*/
float: none;
margin: 0;
padding: 7px 10px;
/*子選單邊框*/
border-top:1px solid #FFC991;
border-bottom: 1px solid #FFC991;
border-left: 1px solid #FFC991;
border-right: 1px solid #FFC991;
font: normal 14px Century Gothic, Times New Roman;
}
/*子選單動作選擇顯示*/
#nav li li a:hover, #nav li li a:active {
/*停留時選項邊框*/
border-top:1px solid #000000;
border-bottom: 1px solid #000000;
border-left: 1px solid #000000;
border-right: 1px solid #000000;
background:#757575; /*停留時選項背景要變更的顏色*/
color:#FF9D37; /*停留時選項文字要變更的顏色*/
padding: 7px 10px;
}
#nav li {
float: left;
padding: 0;
}
#nav li ul {
z-index: 9999;
position: absolute;
left: -999em;
height: auto;
width: 170px;
margin: 0;
padding: 0;
}
#nav li ul a {
width: 140px; /*子選單寬度 (沒用)*/
}
#nav li ul ul {
margin: -35px 0 0 94px; /*階層選單位置控制 (高 0 0 與子選單間隔距離)*/
}
#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;
}

色碼部分參考 Color Code

第二部分為程式碼部分
將以下整段插入於 <header1> 工具中的 (展開範本小裝置搜尋此句或下句)
<div class='header-cap-bottom cap-bottom'> 這行的上方

<ul id='nav'>
<li><a expr:href='data:blog.homepageUrl'>首頁</a></li>
<li><a href='#'>臺灣 </a> 
<ul>
<li><a href='http://juliustesting-demo.blogspot.com/search/label/%E5%8F%B0%E5%8C%97'>臺北</a> 
</li>
<li><a href='http://juliustesting-demo.blogspot.com/search/label/%E5%8F%B0%E5%8C%97'>臺中</a> 
</li>
<li><a href='http://juliustesting-demo.blogspot.com/search/label/%E5%8F%B0%E4%B8%AD'>高雄</a> 
</li>
<li><a href='http://juliustesting-demo.blogspot.com/search/label/%E8%8A%B1%E8%93%AE'>花蓮 </a> 
<ul>
<li><a href='http://juliustesting-demo.blogspot.com/search/label/%E5%90%89%E5%AE%89%E9%84%89'>吉安鄉</a></li> 
<li><a href='http://juliustesting-demo.blogspot.com/search/label/%E5%A3%BD%E8%B1%90%E9%84%89'>壽豐鄉</a></li> 
</ul>
</li>
<li><a href='http://juliustesting-demo.blogspot.com/search/label/%E5%AE%9C%E8%98%AD'>宜蘭</a> 
</li>
<li><a href='http://juliustesting-demo.blogspot.com/search/label/%E9%AB%98%E9%9B%84'>離島</a> 
</li>
</ul>
</li>

<li><a href='#'>亞洲 </a> 
<ul>
<li><a href='http://juliustesting-demo.blogspot.com/search/label/%E6%97%A5%E6%9C%AC?zx=6afb2073950a7119'>日本 </a> 
<ul>
<li><a href='http://juliustesting-demo.blogspot.com/search/label/%E6%9D%B1%E4%BA%AC'>東京</a></li> 
<li><a href='http://juliustesting-demo.blogspot.com/search/label/%E5%A4%A7%E9%98%AA'>大阪</a></li> 
</ul>
</li>
<li><a href='http://juliustesting-demo.blogspot.com/search/label/%E4%B8%AD%E5%9C%8B'>中國 </a> 
<ul>
<li><a href='http://juliustesting-demo.blogspot.com/search/label/%E5%8C%97%E4%BA%AC'>北京</a></li> 
</ul>
</li>
</ul>
</li>

<li><a href='#'>澳洲</a> 
<ul>
<li><a href='http://juliustesting-demo.blogspot.com/search/label/%E7%B4%90%E8%A5%BF%E8%98%AD'>紐西蘭</a> 
</li>
</ul>
</li>

<li><a href='#'>歐洲</a> 
<ul>
<li><a href='http://juliustesting-demo.blogspot.com/search/label/%E8%8D%B7%E8%98%AD'>荷蘭</a> 
</li>
</ul>
</li>

<li><a href='#'>美洲 </a> 
<ul>
<li><a href='http://juliustesting-demo.blogspot.com/search/label/%E5%8A%A0%E6%8B%BF%E5%A4%A7'>加拿大</a> 
</li>
</ul>
</li>

<li><a href='#'>非洲 </a> 
<ul>
<li><a href='http://juliustesting-demo.blogspot.com/search/label/%E8%82%AF%E4%BA%9E'>肯亞</a> 
</li>
</ul>
</li>

<li><a href='#'>大洋洲 </a> 
<ul>
<li><a href='http://juliustesting-demo.blogspot.com/search/label/%E7%B4%90%E8%A5%BF%E8%98%AD'>帛琉</a> 
</li>
</ul>
</li>

<li><a href='#'>南極洲 </a> 
<ul>
<li><a href='http://juliustesting-demo.blogspot.com/search/label/%E5%8D%97%E6%A5%B5'>南極</a> 
</li>
</ul>
</li>

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

然後在依據自己的需要
將階層超連結的內容、超連結更改
由於我已經把程式碼的階層標在後方
基本上不會太難改
若是要在後面沒放第三階層的地方加入第三階層
記得把標記前的第一個 </li> 放到新加入了 <ul> 跟 </ul> 整段之後

唯一要注意的是
當 blog-page 區塊如果太靠近 header 區塊的話 (或者是區塊已經蓋過去)
會導致子清單無法動作
因此會改參數的話請勿設定兩者間的距離太過接近
缺點就是在某些範本中就不夠美觀 (本 DEMO 網誌範本即是)

Julius-TESTDEMO

block web crawler

心情 × NOW

2013年1月14日

[教學] 階層式水平導覽列

相關文章 :

Memo

GoTop