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