轉 基於Web標準的UI組件 — 菜單(1)

UI Components Based on Web Standards - Menu (1)

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

1. 引導使用者發現網站的內容；
2. 協助使用者執行某一特定的操作。

　　一個完整的菜單是一組功能表項目（Menu Item）的集合，所有的功能表項目在邏輯上應該是並列、平級的關係，它們指向相互之間沒有隸屬關係的內容或功能。

　　功能表項目可以是連結，也可以是另一組功能表項目的集合，即二級菜單（Sub-Menu）。

功能表項目的文案設計

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

基本的XHTML結構

　　在XHTML的一大堆標籤中，有一個被99.99%的Designer和99.98%的Developer忽視的標籤：menu。它的用法與ul一樣，內部可以包含一系列的li元素來構成功能表項目，所以用它來構建菜單是再合適不過的了。如下：

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

　　查看效果（例1）

　　可能大多數人會用（或已經用了）ul來構建自己的菜單XHTML代碼，這樣也不錯，但是現在你知道了有一個標籤叫menu，趕快改過來吧（原裝的好呀^_^）。

功能表項目提示

　　設計功能表項目文案時，“簡短”與“明了”是一對矛盾，在無法用幾個字說得很明白的情況下，就需要“功能表項目提示（Menu Item Tooltip）”了。當滑鼠移至上方在某個功能表項目上的時候，會彈出相應的提示，對此功能表項目的內容和功能作出更進一步的說明。

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

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

　　查看效果（例2）

最簡單的菜單

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

　　先把menu的縮排效果和li前面的點去掉，並定義一個合適的寬度：

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

　　查看效果（例3）

　　再為功能表項目設定盒模型風格，注意IE和Firefox/Opera之間在盒模型上的差異：

menu li{
/*高度20px*/ height:20px;
/*定義每個功能表項目之間的間隔，並用!important*/
/*解決IE與Gecko瀏覽器之間的盒模型差異*/
margin-bottom:4px !important; margin-bottom:2px;
}

　　接下來是最關鍵的一步，請仔細看注釋。

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

　　查看效果（例4）

　　接下來很輕鬆了，簡單設定一下連結在四種狀態下的樣式，使菜單能夠與滑鼠覆蓋事件互動：

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

　　查看效果（例5）

　　也可以把滑鼠效果做得更明顯一些，比如變化一下背景色：

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

　　查看效果（例6）

橫向的菜單

　　製作橫向菜單的方法大致有兩種：浮動與絕對位置。

　　浮動法的思想很簡單：讓每一個功能表項目都向左浮動，最終排成一橫排。我們只需對上面的CSS做一些小小的改動就可以了：

menu{ /*去掉menu的寬度，如果你的頁面有寬度限制，那麼也可以設在這裡*/ margin:0; padding:0; list-style:none; }
menu li{
/*指定li的長與寬*/ height:20px; width:120px;
/*讓它向左浮動*/ float:left; /*設定功能表項目之間的間隔*/ margin-right:4px !important; margin-right:2px;
/*解決IE與Gecko瀏覽器之間的盒模型差異*/ margin-bottom:4px !important; margin-bottom:2px; }

　　查看效果（例7）

　　這種方法不僅可以方便地建立橫向菜單，它的思想同樣用於在“流動布局”中羅列一些相似的內容，是一種應用很廣泛的布局方法。

　　再講“絕對位置”的方法。很多人（包括一些Web標準實踐經驗非常豐富的人）對絕對位置有一種莫名其妙的反感，I don't know why。事實上它是一種極其重要的CSS布局方法，只要在使用時掌握那麼一點點小竅門，你不會碰到讓人沮喪的布局錯亂或者其他什麼古怪的結果。當然我也不是說絕對位置是萬能的，“合適的才是最好的”，何時使用取決於具體的情況。

　　回到菜單的製作上，如果你的功能表項目長短不一，或者高低起伏，總之是不那麼規則的時候，就可以使用絕對位置來實現。首先需要對上面的XHTML作一些小改動：給每個功能表項目一個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>

　　三個功能表項目的id有一個共同的首碼——mi（即Menu Item的縮寫），用於和其他元素的ID命名區分。這種命名方式純粹是我的個人喜好，來自於以前用delphi和VB開發軟體時的習慣。另外一些縮寫包括mnu（Menu，菜單）、btn（Button，按鈕）、pnl（Panel，面板）、lst（List，列表）、tab（Tab Menu，選項卡）等等。這樣做的好處是可以有效防止id命名重複，同時在CSS中也可以只看命名就知道元素的UI類型。

　　接下來就是CSS的工作了。先給menu定好長寬、去除縮排等等：

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

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

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

　　如果跳過了這一步，後面你會發現功能表項目的“絕對位置”並不是以menu為參照物，而是以瀏覽器視窗的左上方為座標原點，當然這不是我們想要的效果。

　　再設定功能表項目共同的屬性和相同的縱座標：

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

　　最後用id選擇單個的功能表項目指定其“個性”的橫座標屬性：

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

　　查看效果（例8）

　　絕對位置對a標籤的定義與浮動法基本一致，請查看例8的原始碼。

　　以上講到的技術與技巧足以應付一般的菜單製作了，apache.org也應該會對我們修改後的菜單感到滿意^_^。在下一篇文章中我會更詳細地介紹基於Web標準製作菜單的進階應用程式和技巧。