横向的菜单
制作横向菜单的方法大致有两种：浮动与绝对定位。 php程序员之家
浮动法的思想很简单：让每一个菜单项都向左浮动，最终排成一横排。我们只需对上面的CSS做一些小小的改动就可以了： www~phperz~com
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） php程序员站
这种方法不仅可以方便地创建横向菜单，它的思想同样用于在“流动布局”中罗列一些相似的内容，是一种应用很广泛的布局方法。 www.phperz.com
再讲“绝对定位”的方法。很多人（包括一些Web标准实践经验非常丰富的人）对绝对定位有一种莫名其妙的反感，I don't know why。事实上它是一种极其重要的CSS布局方法，只要在使用时掌握那么一点点小窍门，你不会碰到让人沮丧的布局错乱或者其他什么古怪的结果。当然我也不是说绝对定位是万能的，“合适的才是最好的”，何时使用取决于具体的情况。 php程序员站
回到菜单的制作上，如果你的菜单项长短不一，或者高低起伏，总之是不那么规则的时候，就可以使用绝对定位来实现。首先需要对上面的XHTML作一些小改动：给每个菜单项一个id： php程序员之家
<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类型。 phperz.com
接下来就是CSS的工作了。先给menu定好长宽、去除缩进等等： phperz.com
menu{
width:360px;
height:20px;
margin:0;
padding:0;
} 接下来的一步很重要，给menu指定为相对定位： php程序员之家
menu{
position:relatvie;
width:360px;
height:20px;
margin:0;
padding:0;
} 如果跳过了这一步，后面你会发现菜单项的“绝对定位”并不是以menu为参照物，而是以浏览器窗口的左上角为坐标原点，当然这不是我们想要的效果。 phperz~com
再设置菜单项共同的属性和相同的纵坐标： phperz.com
menu li{
position:absolute;
top:0;
list-style-type:none;
width:120px;
height:20px;
line-height:20px;
text-align:center;
} 最后用id
选择单个的菜单项指定其“个性”的横坐标属性： phperz.com
phperz.com
#miMovie{
left:0;
}
#miMusic{
left:120px;
}
#miSoftware{
left:240px;
} 查看效果（例8） phperz.com
绝对定位对a标签的定义与浮动法基本一致，请查看例8的源代码。 phperz~com
以上讲到的技术与技巧足以应付一般的菜单制作了，apache.org也应该会对我们修改后的菜单感到满意^_^。在下一篇文章中我会更详细地介绍基于Web标准制作菜单的高级应用和技巧。
phperz~com
|
