在本文的第一篇中,我们了解了一个“完美”的菜单应该具备的可用性和易用性特征,并且创建了基本的XHTML和CSS代码。接下来我们将深入到与菜单相关的一些高级特性的实现技术上,首先是——
指示当前活动菜单项当用户点击某菜单项进入网站相应的栏目,我们通常会希望这个菜单项表现出与其它菜单项不同的视觉特征,使用户明确地了解自己所处的“地点”而不至于在站点中迷路。我一直想不好应该是给这个菜单项一个什么样的名字,暂且称为“当前活动菜单项(Currently Active Menu Item)”吧,如果你有什么好想法请一定在右边留言告诉我,谢谢^_^。
当前活动菜单项对创建良好的用户体验具有非常重要的作用,一个负责任的UI设计师是绝对不会忽视它的。实现的方法至少有两种:“直接指示”与“自上而下的指示”。
“直接指示”的方法即直接给当前活动菜单项相对应的li元素一个适当的class属性,再在CSS中为这个class重载一般菜单项的视觉属性,使它表现出“独特”的视觉特征。说得挺悬忽,做起来很简单,我们还是用apache.org的菜单为例,并假设已经点击“DB”项进入了相应的栏目:
<li class="active"> <a href="//db.apache.org/" title="Database access">DB</a> </li>
XHTML只要做这么一点小小的改进就可以了,CSS的改动也不大,只要增加这么一段:
menu li.active a{ background-color:#E8F3FF; border:1px solid #05F; }
查看效果(例9)
“自上而下的指示”并不直接在某个菜单项上指明它特殊的身份,而是先给每个菜单项命名,再在菜单项的“上级(比如body元素)”处指明哪个菜单项被选中了(颇有些类似皇帝翻牌选择当晚“临幸”的妃子^_^)。
我们拿上篇文章中使用”绝对定位”的那个菜单为例,假设“软件”项被选中:
<body class="chlSoftware">
<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>
</body>
body元素的class设置了当前页面所处的频道(栏目),也就是此处chl前缀的意思——Channel。根据这个class就可以设置“临幸”的规矩了……-_-|||
body.chlMovie li#miMovie a, body.chlMusic li#Music a, body.chlSoftware li#miSoftware a{ background-color:#E8F3FF; border:1px solid #05F; }
查看效果(例10)
可能的情况下我建议使用第二种方式,理由如下:
做到现在我们的菜单还都是光秃秃的,某些朋友可能已经对Web标准技术在视觉效果上能走多远产生怀疑。下面我们就把图片引入到菜单的制作中,先从最简单的讲起——给菜单项加个图标“”。我们以例9的菜单为基础,对a元素的样式做些小修改:
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;
/*文字缩进*/ text-indent:20px;
/*图标*/ background:#F6F6F6 url(i/arrow.gif) 5% 50% no-repeat; }
查看效果(例11)
这里有三点需要说明一下:
这又是一个很实用的技术。当我们对简单的盒模型风格不满意的时候,自然会想到使用背景图来创建更有个性的菜单项,实现的方法也很简单,我们还是在例9的基础上做修改。
先看看两张背景图的效果:
普通状态(bk01.gif):
鼠标覆盖(bk02.gif):
CSS的改动也不大,我就拣重要的讲(开始偷懒了……^_^):
menu a:link,menu a:visited{ background:transparent url(i/bk01.gif) 0 0 no-repeat; }
menu a:hover,menu a:active{ background:transparent url(i/bk02.gif) 0 0 no-repeat; }
查看效果(例12)
Yes,就这么简单,只要给a元素的四种状态设置相应的背景图就可以了。这种办法足以应付各种古里古怪的菜单,而且不光可以用在菜单上,任何需要模样古怪的链接的地方都可以用上它。不过这还不是最完美的方法,还有更棒的。
我们先把两张背景图合成一张(bk03.gif):
再修改CSS(这里只列出修改了的部分):
menu a{ ... background:transparent url(i/bk03.gif) 0 0 no-repeat; } menu a:link,menu a:visited{ background:transparent url(i/bk01.gif) 0 0 no-repeat; }
menu a:hover,menu a:active{ background:transparent url(i/bk02.gif) 0 0 no-repeat; background-position:0 -21px; }
查看效果(例13)
看明白了吗?事实上只用了一张图,当鼠标覆盖事件产生后把图的位置向上移动了一段距离,刚好露出下半张图的红色背景部分。这样做有什么好处吗?
某些时候我们对菜单项的视觉效果会要求得更多,比如没有文字纯粹是一张图,或者使用一种极少见的字体。也许你会说:我知道,用背景图片。没错,用上面的“背景图翻转技术”你可以实现它。但是a元素中的文字呢?不能让它继续出现在视野中了,这时就需要用到“文字替换技术”。
为了方便说明,拿我最喜欢的“百事”和“乐事”做一个简单的菜单:
<menu>
<li id="miLays"> <a href="http://www.lays.com/" title="乐事薯片">Lay's</a> </li>
<li id="miPepsi"> <a href="http://www.pepsi.com/" title="百事可乐">Pepsi</a> </li>
</menu>
然后使用“背景图翻转技术”把下面这张图作为背景。
查看效果(例14)。具体的实现代码请自己查看源文件,用到的技术上面都有提到。
接下来就是重头戏了:把那两行带下划线的难看文字去掉。让我们先想想有哪些办法可以把元素从页面上隐去:
好像灭什么办法了?再次向大家隆重介绍text-indent。看看它是怎么做的(在例14的基础上修改):
menu a{ ... text-indent:-9999px; text-decoration:none; }
查看效果(例15)
OMG,真佩服第一个想出这法子来的人。让文字负缩进9999px,也就是往左移动9999像素,别告诉我你的显示器有这么大的分辨率^_^。后面那个text-decoration:none是为了防止Firefox出现下划线(不信你可以拿掉它试试)。
到目前为止IE6、Firefox和Opera都表现完美,可是还没完,你会在IE5下发现根本找不到可点的地方……原来IE5把链接的可点区域和文字一起往左挪到了-9999px处,真是麻烦啊-__-|||。解决的方法倒也不难:用绝对定位(这方法是俺自己找出来的,如有雷同纯属英雄所见略同^_^)。
menu li{ position:relative; ... }
menu a{ position:absolute; top:0; left:0; ... }
查看效果(例16)
这下大家都满意了,这篇文章也到尾声了…… 小结
这篇文章里提到的大部分技术和思想不仅仅可以使用在菜单上,比如“背景图翻转技术”的使用范围就相当广,如果你刚开始学习Web标准,不妨亲手制作一个菜单,熟悉一下这些常用技术。如果你已经有一些Web标准实践经验,请关注这篇文章中提到的各种思想,相信有助于你理解Web标准的目标与责任。如果你是经验丰富的高手,请一定指出这篇文章中的错误和不足,我也是边摸索边总结,估计缺陷不会少。
最后谢谢关注这篇文章的朋友,空的时候我还会接着写其他《基于Web标准的UI组件》。
注:说了这么多还不能满意你的菜单要求?那你的菜单还真是有点bt,也许我之前翻译的一篇文章能帮上忙(这篇文章中还提到另一种文字替换技术,虽然我觉得不怎么好)。
本文作者: