菜单（Menu）是最基本最常见的网页UI元素之一，它的主要功能包括： phperz.com
引导用户发现网站的内容；
协助用户执行某一特定的操作。
一个完整的菜单是一组菜单项（Menu Item）的集合，所有的菜单项在逻辑上应该是并列、平级的关系，它们指向相互之间没有隶属关系的内容或功能。 www~phperz~com
菜单项可以是链接，也可以是另一组菜单项的集合，即二级菜单（Sub-Menu）。 phperz~com
菜单项的文案设计
明了：把意思表达清楚是一个菜单项文案的最基本要求。
根据菜单的两种基本功能，“指向内容”的菜单项最好是一个概括内容的名词或名词性短语（如“诗歌”、“古典小说”），“执行操作”的菜单项最好是一个动词或动宾短语（如“订阅”、“订阅新闻”）。
直白：所有的网站是给用户看的，就按用户们习惯的大白话来和他们交流吧。
举个例子：某门户网站提供了针对宽带用户的在线视频服务，指向这一服务的菜单项上写着“宽频”。中国的大多数互联网使用者都是比较初级而且不懂技术的，所以用“视频”或“在线视频”对他们来说会更加明白清楚（要不是“小电影”有某些其他意思，不然这个词可能更合适一些）。
简短：如果对“简短”原则需要更多解释的话，那就是不要为了“简短”而忽视了“明了”与“直白”。
基本的XHTML结构
在XHTML的一大堆标签中，有一个被99.99%的Designer和99.98%的Developer忽视的标签：menu。它的用法与ul一样，内部可以包含一系列的li元素来构成菜单项，所以用它来构建菜单是再合适不过的了。如下： www.phperz.com
<menu>
<li><a href="/movie/">电影</a></li>
<li><a href="/music/">音乐</a></li>
<li><a href="/software/">软件</a></li>
</menu> 查看效果（例1） www.phperz.com
可能大多数人会用（或已经用了）ul来构建自己的菜单XHTML代码，这样也不错，但是现在你知道了有一个标签叫menu，赶快改过来吧（原装的好呀^_^）。 phperz.com
菜单项提示
设计菜单项文案时，“简短”与“明了”是一对矛盾，在无法用几个字说得很明白的情况下，就需要“菜单项提示（Menu Item Tooltip）”了。当鼠标悬停在某个菜单项上的时候，会弹出相应的提示，对此菜单项的内容和功能作出更进一步的说明。 phperz~com
XHTML中的title属性就是用来提供这项改善可用性的功能： www~phperz~com
<a href="/movie/" title="最新院线电影下载">电影</a> 查看效果（例2） www.phperz.com
最简单的菜单
到目前为止我们写好了菜单的XHTML代码并考虑了可访问性和易用性方面的问题，但这当然还称不上一个可以拿得出手的菜单。不过也有人把这样的菜单拿出来用的，比如apache.org这个bt的技术组织@_@，下面咱就帮他们改个稍微好看点的菜单。 php程序员站
先把menu的缩进效果和li前面的点去掉，并定义一个合适的宽度： php程序员站
以下为引用的内容：menu{ margin:0; padding:0; list-style:none;width:120px; } 查看效果（例3） phperz.com
再为菜单项设置盒模型风格，注意IE和Firefox/Opera之间在盒模型上的差异： php程序员站
menu li{
/*高度20px*/
height:20px;
/*定义每个菜单项之间的间隔，并用!important*/
/*解决IE与Gecko浏览器之间的盒模型差异*/
margin-bottom:4px !important;
margin-bottom:2px;
} 接下来是最关键的一步，请仔细看注释。 php程序员之家
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） php程序员之家
接下来很轻松了，简单设置一下链接在四种状态下的样式，使菜单能够与鼠标覆盖事件交互： www~phperz~com
menu a:link,menu a:visited{
color:#333;
}
menu a:hover,menu a:active{
color:#F50;
}
查看效果（例5） www~phperz~com
也可以把鼠标效果做得更明显一些，比如变化一下背景色： www~phperz~com
menu a:hover,menu a:active{
background-color:#FFEFE6;
border:1px solid #F60;
}
查看效果（例6） phperz~com
|
