[CSS] Step-by-Step: 以清單(UL+LI)實作導覽列 (兼容IE6)

導覽列對於網頁設計來說，是一個非常重要的部分，敘述網站的導覽架構，並讓瀏覽者一眼看到並能認知到是可點選的導覽按鈕。

在整個網頁設計中，肩負著重要資訊的描述以及視覺注視的任務，不能搶過主要的視覺焦點，卻要能醒目及兼具設計質感，達到網頁設計的平衡。

以下則講解，透過CSS樣式，把清單（list）文字調整成導覽列使用的方法。我們的目標是作出下面這個形式的導覽列：

• About
• Works
• Video
• Links
• Story

1. 基本語法（HTML部份）

1.A 清單（list）採用[color=#CC0066] <ul> 標籤定義清單的範圍[/color]，並使用 [color=#CC0066]<li> 標籤定義個別項目[/color]：
<ul> <li>About</li> <li>Works</li> <li>Video</li> <li>Links</li> <li>Story</li> </ul>
1.B 加入超連結標籤 <a> 並寫入網址讓 List 具有導覽列功能：
<ul> <li><a href="index.html">About</a></li> <li><a href="works.html">Works</a></li> <li><a href="video.html">Video</a></li> <li><a href="links.html">Links</a></li> <li><a href="story.html">Story</a></li> </ul>
1.C 為導覽列加入 ID (#button)，以供 CSS 風格設定
<ul id="button"> <li><a href="index.html">About</a></li> <li><a href="works.html">Works</a></li> <li><a href="video.html">Video</a></li> <li><a href="links.html">Links</a></li> <li><a href="story.html">Story</a></li> </ul>
預覽結果（底色與文字顏色另加）：

IE6 / IE7 效果示意

IE8 / Chrome / Firefox 效果示意

觀察重點：
1. List 有預設的「圓點」標示。
2. 在 List 前後有預設的「邊距 MARGIN」（實際上的邊距值為「一行行高」：1 em）。

2. 加入 MARGIN: 0;

IE6 / IE7 效果示意

• About
• Works
• Video
• Links
• Story

IE8 / Chrome / Firefox 效果示意

• About
• Works
• Video
• Links
• Story

3. 加入 PADDING: 0;

IE6 / IE7 效果示意

• About
• Works
• Video
• Links
• Story

IE8 / Chrome / Firefox 效果示意

• About
• Works
• Video
• Links
• Story

至此兩組不同的瀏覽器效果開始統一。

4. 加入 LIST-STYLE: NONE;

#button{
  margin: 0;
  padding: 0;
  list-style: none;
}

預覽效果

• About
• Works
• Video
• Links
• Story

5. 將 li 元素設定為向左浮動

#button{
  margin: 0;
  padding: 0;
  list-style: none;
}

#button li {
  float: left;
}

預覽效果

• About
• Works
• Video
• Links
• Story

6. 設定 li 元素的寬與高

#button{
  margin: 0;
  padding: 0;
  list-style: none;
}

#button li {
  float: left;
  width: 170px;
  line-height: 2em;
}

預覽效果

• About
• Works
• Video
• Links
• Story

1. CSS 部分

#button {        
        [color=#CC3300]/*文字設定*/[/color]
        font-weight: bolder;
        color: #FFF;
        font-size: 14px;
    
        [color=#993300]/*將內定的邊距清除*/[/color]
        margin: 0px;

        [color=#993300]/*將清單內定的內距清除(無清除，則左側會多出約40px，範例二可不用加這一項*/[/color]
        padding:0px;
        }

#button li {
  [color=#CC3300]/*高度設定：使用 line-height 設定可讓文字自動垂直置中*/[/color]
  line-height: 2em;

  [color=#CC3300]/*背景色設定*/[/color]
  background: dodgerBlue;
}

2. [color=#CC3300]1.改變底色的做法/文字居中排法[/color]

#button li {
           [color=#CC0099]/* 讓各個清單元素靠左對齊，由原本的垂直排列變成水平排列，形成水平清單 */[/color]
   　　  float:left;

        　[color=#CC0099]/* 設定清單文字範圍的寬度 */[/color]
    　　 width:178px;
        
        　[color=#CC0099]/* 去除清單文字前面的小點*/[/color]
　   　  list-style-type:none;
        　        
        　[color=#CC0099]/* 讓清單文字居中對齊 */[/color]
    　　 text-align:center;
        　
           [color=#CC3300]/* 設定背景色，依個人喜好調整背景色，但要符合整設計風格 */[/color]
           background-color:#6E6E6E;

        　[color=#CC3300]/* 設定字距為2px，非必要 */[/color]
        　letter-spacing: 2px;
        
        　[color=#CC3300]/* 設定左邊的白邊樣式，可依個人喜好調整 */[/color]
        　border-left-width: 1px;
        　border-left-style: solid;
        　border-left-color: #FFF;
        
        　[color=#CC3300]/* 右邊留白1像素 ，可依個人喜好調整*/[/color]
           margin-right:1px;
　　　}
                
#button li a {
        　[color=#CC0099]/* 連結範圍充滿整個區塊 */[/color]
    　　 display: block;
        
        　[color=#CC0099]/* 單個連結範圍的框度和高度*/[/color]
        　width: 180px;
        　height:20px;
        
           [color=#CC3300]/* 設定連結範圍向上的內距，依狀況調整 */[/color]
        　padding-top:2px;
        
        　[color=#CC3300]/* 連結的文字設為白色以及無裝飾(無底線) ，依個人喜好調整背景色，但要符合整設計風格*/[/color]
        　color: #FFF;
        　text-decoration: none;
　　　}

#button li a:hover{
           [color=#993300]/* 設定滑鼠移過時，清單改變的底色設定 */[/color]
           background-color:#39919F;
}

完成範例
http://mepopedia.com/~jinjin/web/hw04-1/　（滑入底色變色及文字置中的導覽列）


[hr]

3. [color=#CC3300]2.改變文字顏色的做法[/color]

#button li {        
        float: left;
        list-style-type: none;
        letter-spacing: 2px;
        border-left-width: 1px;
        border-left-style: solid;
        border-left-color: #FFF;
        padding-left: 10px;
}
                
#button li a {
   　  display: block;
        width: 160px;
        height: 22px;
        padding-top:2px;
        color: #FFF;
        text-decoration: none;
}

#button li a:hover{
　　 /* 設定滑鼠移過時，改變文字顏色的設定 */
        color: #7CCBDC;
}

完成範例
http://mepopedia.com/~jinjin/web/hw04/　（滑入僅文字變色的導覽列）



(編輯記錄)