DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> CSS入門知識 >> CSS詳解 >> 網站導航菜單的分割線和水平居中
網站導航菜單的分割線和水平居中
編輯:CSS詳解     

寫這篇啰嗦的文章,緣由來自於Jorux Notebook的《什麼是Semantics?》文章。

實際上,從《網站重構》一書開始在國內流行之後,Zeldman提出的語義化標記就已經在一定程度上流傳開來。在拋棄table布局頁面之後大家突然發現,原來這還不夠,隨意地使用<p>或者<div>來進行布局實際上和table布局一樣的糟糕。

Jorux的例子(如下):

我是老大 | 我是不好意思說 | 老三 | 老四在這裡 | 老幺

Jorux指出,在這種極為普遍的導航樣式中(通常是用於網站底部的信息導航,100個網站裡有90個采用這樣的模式),我們應該使用無序列表,而不是下面這種:

   1:  <p>
   2:  <a href=”home.Html”>首頁</a> | 
   3:  <a href=”about.Html”>關於</a> | 
   4:  <a href=”blog.Html”>博客</a> | 
   5:  <a href=”message.Html”>留言</a> | 
   6:  <a href=”album.Html”>相冊</a>
   7:  </p>

甚至是使用了<ul>,但是依然將修飾線條作為內容元素的寫法也是五十步笑百步:

   1:  <ul>
   2:  <li><a href=”home.Html”>首頁</a></li>
   3:  <li>|</li>
   4:  <li><a href=”about.Html”>關於</a></li>
   5:  <li>|</li>
   6:  <li><a href=”blog.Html”>博客</a></li>
   7:  <li>|</li>
   8:  <li><a href=”message.Html”>留言</a></li>
   9:  <li>|</li>
  10:  <li><a href=”album.Html”>相冊</a></li>
  11:  </ul>


遺憾的是,內容與樣式分離web標准化建設的推進道路總是充滿了各種各樣的阻礙。即使是新浪和淘寶在它們的頁面底部也存在著上述的情況。

先來看新浪的截圖:

image

代碼(簡略了內容):

   1:  <div style="padding-bottom:6px;">
   2:      <a href="">新浪簡介</a> ┊ 
   3:      <a href="">About Sina</a> ┊ 
   4:      <a href="">廣告服務</a> ┊ 
   5:      <a href="">聯系我們</a> ┊
   6:      <a href="">誠聘英才</a>
   7:  </div>

為什麼要這麼做,有過網頁制作經驗的朋友大概會了解。網站底部的導航通常都是以比較簡單的文本形式出現,居中,再附加一些修飾——大部分都是“|”和“·”或者“—”。Html部分采用新浪的做法,節省了編寫CSS的時間,最重要的是讓一切水平居中顯示將是非常簡單的事情。只需要將<div>的text-align設置為center就萬事大吉。

這裡需要討論的是,到底使用什麼標記才算是語義化?

我們沒有教科書,任何一本某某權威指南不會寫著:你應該使用<ul>和<li>,而不是<div>和<p>來制作導航菜單。也就是說,我認為如果考慮到實際項目的操作,使用前者或後者都不是一個嚴重到會出現違背XHtml准則的問題。

我們來看淘寶的底部:

image

在我看到,如果按照zeldman的思路,應該這樣去寫:

   1:  <dl>
   2:      <dt>全球阿裡巴巴 - 阿裡巴巴網絡</dt>
   3:      <dd>
   4:          <ul>
   5:              <li>中國站</li>
   6:              <li>國際站</li>
   7:              ......
   8:          </ul>
   9:      </dd>
  10:  </dl>

但實際上,淘寶的代碼是這樣:

   1:  <div class="ali-group" style="width:680px;margin:5px auto;">
   2:  全球阿裡巴巴 - 阿裡巴巴網絡:
   3:      <a href="">中國站</a>
   4:      <a href="">國際站</a>
   5:      <a href="">日文站</a> | 
   6:      <a href="">淘寶站</a> | 
   7:      <a href="">支付寶</a> | 
   8:      ......
   9:  </div>

為什麼一個如此提倡標准化的UED小組所編寫的淘寶代碼中也有和Jorux說法相違背,不嚴格按照語義化標記來操作呢?

因為,這樣的水平居中和添加“|”不會那麼煩人。

煩人的分割線

不要小看這個“|”,加入這麼一個小小的修飾線條,看似簡單,實際上還是比較頭痛的。

首先我們知道,這個豎線是分割線,是把一個個鏈接從視覺上分開的一種手段,有多種方式去實現這一個效果:

1、直接插入“|”實體,但這和用空的table來撐開空白一樣,是不符合內容和樣式分離准則。

2、使用border-right來給每一個鏈接加上一個1px寬的邊框。缺點是這個邊框線條的高度定義起來比較討厭,作為行內元素的a,無法應用到上下內邊距來控制高度,勉強使用行高line-height只會讓你在實際應用中漏洞百出。

3、使用background來給每一個鏈接加上一個豎線的圖片背景,這種方式在視覺效果上應用靈活,但缺點是會多制作一張圖片(盡管你可以CSS Sprites或者你認為一條豎線的圖片大小可以忽略不計),同樣高度無法定義。

4、使用:after這樣的偽類元素,如a:after { content: "|"; }。可以再添加font-size來稍稍控制高度。盡管這樣的一種做法被一些css玩家所推崇,畢竟了解的人少,使它看上去比較的高深和復雜。實際上它的缺點也最多。首先,:after在版本8以下的IE中通通免談,這就意味著大部分浏覽者無法看到這樣的效果。其次,看上去這一條“|”是由CSS來控制的樣式,實際上它在Html中實際生成了內容,本質上和直接在<a>之後插入一個“|”沒有區別。

綜上所述,我們理應拋棄第一種做法,采用2、3、4中的一種來顯示這個分割線效果。然而接踵而至的問題是,不管你用了哪種方法,你都要考慮如何去除最後一個“|”分割線。讓導航看上是這樣:

我是老大 | 我是不好意思說 | 老三 | 老四在這裡 | 老幺

而不是這樣:

我是老大 | 我是不好意思說 | 老三 | 老四在這裡 | 老幺 |

常用的做法是給div中的最後一個a,或者ul中的最後一個li(或者都是第一個a和li,這取決與你CSS中的左右位置)添加一個id或者class,例如:

   1:  <ul id="menu">
   2:      ......    
   3:      <li><a href="#">王老五</a></li>
   4:      <li class="last"><a href="#">老幺</a></li>
   5:  </ul>

然後在CSS添加對這個.last的單獨定義,去除它的邊框或者背景或者:after生成的content內容。

如此的繁瑣,是不是已經開始頭大了?

水平居中

從分割線的問題,我們往下討論導航的水平居中問題。

淘寶的另一個底部導航采用了不讓人頭大的選擇:

image

在這個例子中,Html如下:

   1:  <ul class="foot-nav" style="width:690px;_width:695px;">
   2:      <li><a href="">關於淘寶</a></li>
   3:      <li><a href="">廣告服務</a></li>
   4:      <li><a href="">合作伙伴</a></li>
   5:      <li><a href="">幫助中心</a></li>
   6:      <li><a href="">誠征英才</a></li>
   7:      <li><a href="">聯系我們</a></li>
   8:      <li><a href="">網站地圖</a></li>
   9:      <li><a href="">熱門品牌</a></li>
  10:  </ul>

這裡的采用了標准的寫法,沒有分割線,沒有額外的id或class,沒有上面討論的煩人的各種問題。

然而這種寫法意味著,如果將li的display設置block,text-align:center無法輕松的將這個導航水平放置在頁面的正中,除非你給ul定義了一個寬度,在上面的代碼中淘寶也的確是這樣去做的。

如果,導航菜單中的項目數量不能夠確定,整體的寬度勢必也要成為變量——一個未知寬度。不斷地去修改這個width,以確保margin: 0 auto;可以讓這個導航水平居中無疑將讓你的工作變得瑣碎和困難。

未知寬度的水平居中

最簡單的方法,就是讓每一個li元素不要以block的形式float:left,以inline的方式讓它們一字排開,給ul一個text-align:center就可以搞定這一切。

我做了這樣一個例子,demo1。為了圖省事,我沒有做圖,采用背景圖片的方式顯示分割線,而是使用了:after生成content的方法。

在CSS中的最後,我添加這樣兩行:

   1:  #menu li:before { content: "|"; padding-right: 10px; }
   2:  #menu li:first-child:before { content: ""; }

這樣,在不支持:after的浏覽器中,導航以最質樸的方式展現,在IE8和FF這樣的浏覽器中,分割線將顯示出來,最後一個li的分割線將被刪除。

上面的方法,在大部分時間還是比較好用的,但如果需要給導航菜單添加更多的效果控制,例如給每一個li添加一個按鈕似的背景,我們就必須讓li成為塊級元素。這個時候,text-align:center就無效了。

好在Stu Nicholls給出了一個解決方案——Centering Float Left Menus。

我做了另一個例子,demo2。

在這樣的基礎之上,無論你或刪或增導航菜單的項目數量,無論你是想給它添加簡單背景色,還是添加復雜的圓角框,你都可以從容應對了。

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved