基于Web標(biāo)準(zhǔn)的UI組件 — 菜單(1)

UI Components Based on Web Standards - Menu (1)

　　菜單（Menu）是最基本最常見的網(wǎng)頁UI元素之一，它的主要功能包括：

1. 引導(dǎo)用戶發(fā)現(xiàn)網(wǎng)站的內(nèi)容；
2. 協(xié)助用戶執(zhí)行某一特定的操作。

　　一個(gè)完整的菜單是一組菜單項(xiàng)（Menu Item）的集合，所有的菜單項(xiàng)在邏輯上應(yīng)該是并列、平級(jí)的關(guān)系，它們指向相互之間沒有隸屬關(guān)系的內(nèi)容或功能。

　　菜單項(xiàng)可以是鏈接，也可以是另一組菜單項(xiàng)的集合，即二級(jí)菜單（Sub-Menu）。

菜單項(xiàng)的文案設(shè)計(jì)

1. 明了：把意思表達(dá)清楚是一個(gè)菜單項(xiàng)文案的最基本要求。
   根據(jù)菜單的兩種基本功能，“指向內(nèi)容”的菜單項(xiàng)最好是一個(gè)概括內(nèi)容的名詞或名詞性短語（如“詩歌”、“古典小說”），“執(zhí)行操作”的菜單項(xiàng)最好是一個(gè)動(dòng)詞或動(dòng)賓短語（如“訂閱”、“訂閱新聞”）。
2. 直白：所有的網(wǎng)站是給用戶看的，就按用戶們習(xí)慣的大白話來和他們交流吧。
   舉個(gè)例子：某門戶網(wǎng)站提供了針對(duì)寬帶用戶的在線視頻服務(wù)，指向這一服務(wù)的菜單項(xiàng)上寫著“寬頻”。中國的大多數(shù)互聯(lián)網(wǎng)使用者都是比較初級(jí)而且不懂技術(shù)的，所以用“視頻”或“在線視頻”對(duì)他們來說會(huì)更加明白清楚（要不是“小電影”有某些其他意思，不然這個(gè)詞可能更合適一些）。
3. 簡(jiǎn)短：如果對(duì)“簡(jiǎn)短”原則需要更多解釋的話，那就是不要為了“簡(jiǎn)短”而忽視了“明了”與“直白”。

基本的XHTML結(jié)構(gòu)

　　在XHTML的一大堆標(biāo)簽中，有一個(gè)被99.99%的Designer和99.98%的Developer忽視的標(biāo)簽：menu。它的用法與ul一樣，內(nèi)部可以包含一系列的li元素來構(gòu)成菜單項(xiàng)，所以用它來構(gòu)建菜單是再合適不過的了。如下：

<menu><li><a href="/movie/">電影</a></li><li><a href="/music/">音樂</a></li><li><a href="/software/">軟件</a></li></menu>

　　查看效果（例1）

　　這里需要特別說明一下，menu標(biāo)簽在XHTML Strict中已經(jīng)不存在了，如果基于“向前兼容”的考慮，建議使用ul來代替menu。如果你的DocType是XHTML Transitional，那么使用menu是完全沒問題的（包括通過校驗(yàn)）。具體怎么使用請(qǐng)根據(jù)你的實(shí)際情況選擇，在這篇文章中我將使用menu標(biāo)簽。

菜單項(xiàng)提示

　　設(shè)計(jì)菜單項(xiàng)文案時(shí)，“簡(jiǎn)短”與“明了”是一對(duì)矛盾，在無法用幾個(gè)字說得很明白的情況下，就需要“菜單項(xiàng)提示（Menu Item Tooltip）”了。當(dāng)鼠標(biāo)懸停在某個(gè)菜單項(xiàng)上的時(shí)候，會(huì)彈出相應(yīng)的提示，對(duì)此菜單項(xiàng)的內(nèi)容和功能作出更進(jìn)一步的說明。

　　XHTML中的title屬性就是用來提供這項(xiàng)改善可用性的功能：

<a href="/movie/" title="最新院線電影下載">電影</a>

　　查看效果（例2）

最簡(jiǎn)單的菜單

　　到目前為止我們寫好了菜單的XHTML代碼并考慮了可訪問性和易用性方面的問題，但這當(dāng)然還稱不上一個(gè)可以拿得出手的菜單。不過也有人把這樣的菜單拿出來用的，比如apache.org這個(gè)bt的技術(shù)組織@_@，下面咱就幫他們改個(gè)稍微好看點(diǎn)的菜單。

　　先把menu的縮進(jìn)效果和li前面的點(diǎn)去掉，并定義一個(gè)合適的寬度：

menu{margin:0;padding:0;list-style:none;
	width:120px;}

　　查看效果（例3）

　　再為菜單項(xiàng)設(shè)置盒模型風(fēng)格，注意IE和Firefox/Opera之間在盒模型上的差異：

menu li{/*高度20px*/height:20px;/*定義每個(gè)菜單項(xiàng)之間的間隔，并用!important*//*解決IE與Gecko瀏覽器之間的盒模型差異*/margin-bottom:4px !important;margin-bottom:2px;}

　　接下來是最關(guān)鍵的一步，請(qǐng)仔細(xì)看注釋。

menu a{/*定義a為塊級(jí)元素，方便用盒模型屬性定義外觀*/display:block;/*定義尺寸*/width:100%;height:20px;/*盒模型風(fēng)格*/background-color:F6F6F6;border:1px solid #DDD;/*文字樣式*/font:11px arial;text-decoration:none;/*文字垂直居中*/line-height:20px;/*文字水平居中*/text-align:center;}

　　查看效果（例4）

　　接下來很輕松了，簡(jiǎn)單設(shè)置一下鏈接在四種狀態(tài)下的樣式，使菜單能夠與鼠標(biāo)覆蓋事件交互：

menu a:link,menu a:visited{color:#333;}menu a:hover,menu a:active{color:#F50;}

　　查看效果（例5）

　　也可以把鼠標(biāo)效果做得更明顯一些，比如變化一下背景色：

menu a:hover,menu a:active{background-color:#FFEFE6;border:1px solid #F60;}

　　查看效果（例6）

橫向的菜單

　　制作橫向菜單的方法大致有兩種：浮動(dòng)與絕對(duì)定位。

　　浮動(dòng)法的思想很簡(jiǎn)單：讓每一個(gè)菜單項(xiàng)都向左浮動(dòng)，最終排成一橫排。我們只需對(duì)上面的CSS做一些小小的改動(dòng)就可以了：

menu{/*去掉menu的寬度，如果你的頁面有寬度限制，那么也可以設(shè)在這里*/margin:0;padding:0;list-style:none;}menu li{/*指定li的長與寬*/height:20px;width:120px;/*讓它向左浮動(dòng)*/float:left;/*設(shè)置菜單項(xiàng)之間的間隔*/margin-right:4px !important;margin-right:2px;/*解決IE與Gecko瀏覽器之間的盒模型差異*/margin-bottom:4px !important;margin-bottom:2px;}

　　查看效果（例7）

　　這種方法不僅可以方便地創(chuàng)建橫向菜單，它的思想同樣用于在“流動(dòng)布局”中羅列一些相似的內(nèi)容，是一種應(yīng)用很廣泛的布局方法。

　　再講“絕對(duì)定位”的方法。很多人（包括一些Web標(biāo)準(zhǔn)實(shí)踐經(jīng)驗(yàn)非常豐富的人）對(duì)絕對(duì)定位有一種莫名其妙的反感，I don‘t know why。事實(shí)上它是一種極其重要的CSS布局方法，只要在使用時(shí)掌握那么一點(diǎn)點(diǎn)小竅門，你不會(huì)碰到讓人沮喪的布局錯(cuò)亂或者其他什么古怪的結(jié)果。當(dāng)然我也不是說絕對(duì)定位是萬能的，“合適的才是最好的”，何時(shí)使用取決于具體的情況。

　　回到菜單的制作上，如果你的菜單項(xiàng)長短不一，或者高低起伏，總之是不那么規(guī)則的時(shí)候，就可以使用絕對(duì)定位來實(shí)現(xiàn)。首先需要對(duì)上面的XHTML作一些小改動(dòng)：給每個(gè)菜單項(xiàng)一個(gè)id：

<menu><li id="miMovie"><a href="/movie/" title="DVDRip">電影</a></li><li id="miMusic"><a href="/music/" title="mp3">音樂</a></li><li id="miSoftware"><a href="/dl/" title="共享">軟件</a></li></menu>

　　三個(gè)菜單項(xiàng)的id有一個(gè)共同的前綴——mi（即Menu Item的縮寫），用于和其他元素的ID命名區(qū)分。這種命名方式純粹是我的個(gè)人喜好，來自于以前用delphi和VB開發(fā)軟件時(shí)的習(xí)慣。另外一些縮寫包括mnu（Menu，菜單）、btn（Button，按鈕）、pnl（Panel，面板）、lst（List，列表）、tab（Tab Menu，選項(xiàng)卡）等等。這樣做的好處是可以有效防止id命名重復(fù)，同時(shí)在CSS中也可以只看命名就知道元素的UI類型。

　　接下來就是CSS的工作了。先給menu定好長寬、去除縮進(jìn)等等：

menu{width:360px;height:20px;margin:0;padding:0;}

　　 接下來的一步很重要，給menu指定為相對(duì)定位：

menu{position:relatvie;width:360px;height:20px;margin:0;padding:0;}

　　如果跳過了這一步，后面你會(huì)發(fā)現(xiàn)菜單項(xiàng)的“絕對(duì)定位”并不是以menu為參照物，而是以瀏覽器窗口的左上角為坐標(biāo)原點(diǎn)，當(dāng)然這不是我們想要的效果。

　　再設(shè)置菜單項(xiàng)共同的屬性和相同的縱坐標(biāo)：

menu li{position:absolute;top:0;list-style-type:none;width:120px;height:20px;line-height:20px;text-align:center;}

　　最后用id選擇單個(gè)的菜單項(xiàng)指定其“個(gè)性”的橫坐標(biāo)屬性：

#miMovie{left:0;}#miMusic{left:120px;}#miSoftware{left:240px;}

　　查看效果（例8）

　　絕對(duì)定位對(duì)a標(biāo)簽的定義與浮動(dòng)法基本一致，請(qǐng)查看例8的源代碼。

　　以上講到的技術(shù)與技巧足以應(yīng)付一般的菜單制作了，apache.org也應(yīng)該會(huì)對(duì)我們修改后的菜單感到滿意^_^。在下一篇文章中我會(huì)更詳細(xì)地介紹基于Web標(biāo)準(zhǔn)制作菜單的高級(jí)應(yīng)用和技巧。

　　繼續(xù)閱讀《基于Web標(biāo)準(zhǔn)的UI組件 — 菜單(2)》