基于Web标准的UI组件 — 菜单(1)

UI Components Based on Web Standards - Menu (1)

　　菜单（Menu）是最基本最常见的网页UI元素之一，它的主要功能包括：

引导用户发现网站的内容；
协助用户执行某一特定的操作。

　　一个完整的菜单是一组菜单项（Menu Item）的集合，所有的菜单项在逻辑上应该是并列、平级的关系，它们指向相互之间没有隶属关系的内容或功能。

　　菜单项可以是链接，也可以是另一组菜单项的集合，即二级菜单（Sub-Menu）。

菜单项的文案设计

明了：把意思表达清楚是一个菜单项文案的最基本要求。
根据菜单的两种基本功能，“指向内容”的菜单项最好是一个概括内容的名词或名词性短语（如“诗歌”、“古典小说”），“执行操作”的菜单项最好是一个动词或动宾短语（如“订阅”、“订阅新闻”）。
直白：所有的网站是给用户看的，就按用户们习惯的大白话来和他们交流吧。
举个例子：某门户网站提供了针对宽带用户的在线视频服务，指向这一服务的菜单项上写着“宽频”。中国的大多数互联网使用者都是比较初级而且不懂技术的，所以用“视频”或“在线视频”对他们来说会更加明白清楚（要不是“小电影”有某些其他意思，不然这个词可能更合适一些）。
简短：如果对“简短”原则需要更多解释的话，那就是不要为了“简短”而忽视了“明了”与“直白”。

基本的XHTML结构

　　在XHTML的一大堆标签中，有一个被99.99%的Designer和99.98%的Developer忽视的标签：menu。它的用法与ul一样，内部可以包含一系列的li元素来构成菜单项，所以用它来构建菜单是再合适不过的了。如下：

　　查看效果（例1）

　　可能大多数人会用（或已经用了）ul来构建自己的菜单XHTML代码，这样也不错，但是现在你知道了有一个标签叫menu，赶快改过来吧（原装的好呀^_^）。

菜单项提示

　　设计菜单项文案时，“简短”与“明了”是一对矛盾，在无法用几个字说得很明白的情况下，就需要“菜单项提示（Menu Item Tooltip）”了。当鼠标悬停在某个菜单项上的时候，会弹出相应的提示，对此菜单项的内容和功能作出更进一步的说明。

　　XHTML中的title属性就是用来提供这项改善可用性的功能：

　　查看效果（例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：

　　三个菜单项的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标准制作菜单的高级应用和技巧。

本文作者:

«
»

PHP教程

PHP简介 PHP基本语法 PHP类型 PHP变量 PHP运算符 PHP控制结构 PHP函数 PHP类与对象 PHP异常处理函数库分类