（中級）縱向選單

李鬆峰發表於2012-12-09

本文節選自《CSS設計指南（第3版》。
第1章完全免費試讀，電子書線上熱賣中：http://www.ituring.com.cn/book/1111

以下內容節選自第6章“介面元件”。

先從最簡單的情況開始講，通過下面這個簡單的例子，你會知道把列表轉換成選單的關鍵技術。

<nav class="list1">
    <ul>
        <li><a href="#">Alternative</a></li>
        <li><a href="#">Country</a></li>
        <li><a href="#">Jazz</a></li>
        <li><a href="#">Rock</a></li>
    </ul>
</nav>

以上標記給每個列表項的文字都加了連結標籤，讓它們都變得可以點選。（每個連結中的#是URL佔位符，將來可以替換成真正的URL。）

首先，我們通過第一個例子來展示幾個問題，很多初學者在為導航連結寫樣式的時候都會遇到這些問題。然後，再告訴你怎麼解決它們。無論如何，這些CSS應用到HTML之後，會得到一個看起來很簡潔的選單，如圖6-1所示。

/*去掉預設的內邊距和外邊距*/
* {margin:0; padding:0;}
/*設定本例中選單的大小和位置*/
nav {margin:50px; width:150px;}
/*給選單加上邊框*/
.list1 ul {border:1px solid #f00; border-radius:3px;
    padding:5px 10px 3px;}
/*去掉專案符號併為連結新增間距*/
.list1 li {list-style-type:none; padding:3px 10px;}
/*“非首位子元素”選擇符*/
.list1 li + li {border-top:1px solid #f00;}
/*為連結新增樣式*/
.list1 a {text-decoration:none; font:20px Exo, helvetica,
        arial, sans-serif; font-weight:400; color:#000;
        background:#ffed53;}
/*懸停高亮*/
.list1 a:hover {color:#069;}

enter image description here
圖6-1 應用樣式之後的無序列表，從箭頭游標可知，沒有文字的區域是不能點選的

新增這些樣式沒什麼難度。HTML5新增的nav元素在語義上很恰當，因此我們用它作為導航選單的容器，還給它新增了一個類作為設定樣式的上下文。

使用“非首位子元素”選擇符

前面的CSS程式碼中有兩點特別值得一說。首先，加粗的li + li選擇符的意思是“任何跟在li之後的li”。

對於連續的元素——比如這裡多個li，這個選擇符會選擇除第一個之外的所有li元素。這樣，就可以給除第一個li之外的所有列表項上方加一條邊框。假如我只簡單使用li選擇符，那第一個列表項上方也將被加上邊框，而這不是我們想要的。我把這種選擇符稱為“非首位子元素”選擇符，它在選擇列表時非常實用。當然，也有實現相同效果的其他方法，比如

/*給所有li上方新增一條邊框*/
li {border-top:1px solid #f00;}
/*去掉第一個li上方的邊框*/
li:first-child {border-top:none;}

讓列表行可以點選

在圖6-2中，我為每個連結都加上了背景色，以便顯示相應連結可點選區域的大小。如圖所示，目前只有文字是可以點的，因為連結（a）是行內元素，它會收縮幷包住其中的文字。然而，更好的使用者體驗是讓列表項所在的整行都能點選。之所以要重點講這個問題，是因為我發現很多站點都沒有這麼做。結果就是使用者必須用滑鼠點選文字，點選文字之外的地方沒有反應。

此外，在每個li元素的上方和下方，各有3畫素的內邊距，導致連結文字與列表項邊框之間有了距離。正因為有了這段距離，當使用者滑鼠移動到連結間的間隙時，游標會從“懸停於連結之上”時的小手形狀，變成常規的箭頭形狀。

enter image description here
圖6-2 臨時加的背景色讓我們看清了a元素實際可以點選的區域大小，如圖所示，游標在經過兩個連結的間隙時從小手變成了指標

要解決上述問題，首先得把內邊距從li元素轉移到連結內部，然後讓連結完全填滿整個列表項。

* {margin:0; padding:0;}
nav {margin:50px; width:150px;}
.list1 ul {border:1px solid #f00; border-radius:3px;
padding:5px 10px 3px;}
.list1 li {list-style-type:none; padding:3px 10px;}
.list1 li + li a {border-top:1px solid #f00;}
.list1 a {display:block; padding:3px 10px; textdecoration:
          none; font:20px Exo, helvetica, arial, sansserif;
font-weight:400; color:#000; background:#ffed53;}
.list1 a:hover {color:#069;}

把選擇符li + li變成li + li a，就可以把上邊框新增到列表項後面的列表項所包含的連結元素上（雖然有點繞，但你應該明白我的意思吧？）。而且，我還把內邊距從列表項轉移到了連結內部。這樣，連結上下就互相接觸了，中間沒了間隙，滑鼠經過時游標狀態也不會變了。最後，還要把每個連結的display屬性設定為block，這樣連結元素的盒子就會由“收縮包圍內容”變成“擴充套件填充父元素”。換句話說，連結的可點選區域將擴大到整個列表行。圖6-3清晰地說明了經過這些改進後的效果。

enter image description here
圖6-3 每個連結都填滿了整個列表項，所以整個區域都可以點選了。左圖的背景色顯示了可點選區域，而右圖則顯示了去掉測試用的背景色之後的最終效果

相關文章