菜單（Menu）是最基本最常見(jiàn)的網(wǎng)頁(yè)UI元素之一，它的主要功能包括：
一個(gè)完整的菜單是一組菜單項（Menu Item）的集合，所有的菜單項在邏輯上應該是并列、平級的關(guān)系，它們指向相互之間沒(méi)有隸屬關(guān)系的內容或功能。
菜單項可以是鏈接，也可以是另一組菜單項的集合，即二級菜單（Sub-Menu）。
在XHTML的一大堆標簽中，有一個(gè)被99.99%的Designer和99.98%的Developer忽視的標簽：menu。它的用法與ul一樣，內部可以包含一系列的li元素來(lái)構成菜單項，所以用它來(lái)構建菜單是再合適不過(guò)的了。如下：
<menu><li><a href="/movie/">電影</a></li><li><a href="/music/">音樂(lè )</a></li><li><a href="/software/">軟件</a></li></menu> 這里需要特別說(shuō)明一下，menu標簽在XHTML Strict中已經(jīng)不存在了，如果基于“向前兼容”的考慮，建議使用ul來(lái)代替menu。如果你的DocType是XHTML Transitional，那么使用menu是完全沒(méi)問(wèn)題的（包括通過(guò)校驗）。具體怎么使用請根據你的實(shí)際情況選擇，在這篇文章中我將使用menu標簽。
設計菜單項文案時(shí)，“簡(jiǎn)短”與“明了”是一對矛盾，在無(wú)法用幾個(gè)字說(shuō)得很明白的情況下，就需要“菜單項提示（Menu Item Tooltip）”了。當鼠標懸停在某個(gè)菜單項上的時(shí)候，會(huì )彈出相應的提示，對此菜單項的內容和功能作出更進(jìn)一步的說(shuō)明。
XHTML中的title屬性就是用來(lái)提供這項改善可用性的功能：
<a href="/movie/" title="最新院線(xiàn)電影下載">電影</a>到目前為止我們寫(xiě)好了菜單的XHTML代碼并考慮了可訪(fǎng)問(wèn)性和易用性方面的問(wèn)題，但這當然還稱(chēng)不上一個(gè)可以拿得出手的菜單。不過(guò)也有人把這樣的菜單拿出來(lái)用的，比如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;}再為菜單項設置盒模型風(fēng)格，注意IE和Firefox/Opera之間在盒模型上的差異：
menu li{/*高度20px*/height:20px;/*定義每個(gè)菜單項之間的間隔，并用!important*//*解決IE與Gecko瀏覽器之間的盒模型差異*/margin-bottom:4px !important;margin-bottom:2px;}接下來(lái)是最關(guān)鍵的一步，請仔細看注釋。
menu a{/*定義a為塊級元素，方便用盒模型屬性定義外觀(guān)*/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;}接下來(lái)很輕松了，簡(jiǎn)單設置一下鏈接在四種狀態(tài)下的樣式，使菜單能夠與鼠標覆蓋事件交互：
menu a:link,menu a:visited{color:#333;}menu a:hover,menu a:active{color:#F50;}也可以把鼠標效果做得更明顯一些，比如變化一下背景色：
menu a:hover,menu a:active{background-color:#FFEFE6;border:1px solid #F60;}制作橫向菜單的方法大致有兩種：浮動(dòng)與絕對定位。
浮動(dòng)法的思想很簡(jiǎn)單：讓每一個(gè)菜單項都向左浮動(dòng)，最終排成一橫排。我們只需對上面的CSS做一些小小的改動(dòng)就可以了：
menu{/*去掉menu的寬度，如果你的頁(yè)面有寬度限制，那么也可以設在這里*/margin:0;padding:0;list-style:none;}menu li{/*指定li的長(cháng)與寬*/height:20px;width:120px;/*讓它向左浮動(dòng)*/float:left;/*設置菜單項之間的間隔*/margin-right:4px !important;margin-right:2px;/*解決IE與Gecko瀏覽器之間的盒模型差異*/margin-bottom:4px !important;margin-bottom:2px;}這種方法不僅可以方便地創(chuàng )建橫向菜單，它的思想同樣用于在“流動(dòng)布局”中羅列一些相似的內容，是一種應用很廣泛的布局方法。
再講“絕對定位”的方法。很多人（包括一些Web標準實(shí)踐經(jīng)驗非常豐富的人）對絕對定位有一種莫名其妙的反感，I don‘t know why。事實(shí)上它是一種極其重要的CSS布局方法，只要在使用時(shí)掌握那么一點(diǎn)點(diǎn)小竅門(mén)，你不會(huì )碰到讓人沮喪的布局錯亂或者其他什么古怪的結果。當然我也不是說(shuō)絕對定位是萬(wàn)能的，“合適的才是最好的”，何時(shí)使用取決于具體的情況。
回到菜單的制作上，如果你的菜單項長(cháng)短不一，或者高低起伏，總之是不那么規則的時(shí)候，就可以使用絕對定位來(lái)實(shí)現。首先需要對上面的XHTML作一些小改動(dòng)：給每個(gè)菜單項一個(gè)id：
<menu><li id="miMovie"><a href="/movie/" title="DVDRip">電影</a></li><li id="miMusic"><a href="/music/" title="mp3">音樂(lè )</a></li><li id="miSoftware"><a href="/dl/" title="共享">軟件</a></li></menu> 三個(gè)菜單項的id有一個(gè)共同的前綴——mi（即Menu Item的縮寫(xiě)），用于和其他元素的ID命名區分。這種命名方式純粹是我的個(gè)人喜好，來(lái)自于以前用delphi和VB開(kāi)發(fā)軟件時(shí)的習慣。另外一些縮寫(xiě)包括mnu（Menu，菜單）、btn（Button，按鈕）、pnl（Panel，面板）、lst（List，列表）、tab（Tab Menu，選項卡）等等。這樣做的好處是可以有效防止id命名重復，同時(shí)在CSS中也可以只看命名就知道元素的UI類(lèi)型。
接下來(lái)就是CSS的工作了。先給menu定好長(cháng)寬、去除縮進(jìn)等等：
menu{width:360px;height:20px;margin:0;padding:0;} 接下來(lái)的一步很重要，給menu指定為相對定位：
menu{position:relatvie;width:360px;height:20px;margin:0;padding:0;} 如果跳過(guò)了這一步，后面你會(huì )發(fā)現菜單項的“絕對定位”并不是以menu為參照物，而是以瀏覽器窗口的左上角為坐標原點(diǎn)，當然這不是我們想要的效果。
再設置菜單項共同的屬性和相同的縱坐標：
menu li{position:absolute;top:0;list-style-type:none;width:120px;height:20px;line-height:20px;text-align:center;} 最后用id選擇單個(gè)的菜單項指定其“個(gè)性”的橫坐標屬性：
#miMovie{left:0;}#miMusic{left:120px;}#miSoftware{left:240px;} 絕對定位對a標簽的定義與浮動(dòng)法基本一致，請查看例8的源代碼。
以上講到的技術(shù)與技巧足以應付一般的菜單制作了，apache.org也應該會(huì )對我們修改后的菜單感到滿(mǎn)意^_^。在下一篇文章中我會(huì )更詳細地介紹基于Web標準制作菜單的高級應用和技巧。
繼續閱讀《基于Web標準的UI組件 — 菜單(2)》
聯(lián)系客服
