8.1 自适应的水平菜单

第7章中，介绍了5个竖直方向菜单的制作方法，相信读者可以体会到CSS的功能非常强大。在本章中，我们将制作6个水平排列的菜单。它们也同样各具特色，而且应用了一些CSS设计中非常重要的技术，例如“滑动门”技术。它不仅仅应用在这里，奉书后面的很多案例中，都会看到“滑动门”技术的应用。

这一节要实现一个简单的水平菜单。这个菜单可以随着浏览器窗口宽度的变化而改变排列方式。当测览器窗口宽度不足以容纳所有的菜单项的时候，会自动折行，如图8.1图所示。

该实例文件位于网页学习网CSS教程资源的“第8章\01\horizonral-navi.htm”。

图1 自适应的水甲菜单效果

它的HTML代码依然是第7章多次使用过的最基本的HTML结构，如下所示。

折叠展开XML/HTML 代码复制内容到剪贴板

<body>
<div id="menu">
<a href="#"> Home</a>
<a href="#"> Contact Us</a>
<a href="#"> Web Dev</a>
<a href="#"> Web Design</a>
<a href="#"> Map</a>
</div>
</body>

接下来设置#menu容器。这里只需要设置文字的样式就可以了。由于宽度会自动水平适应，因此不需要做额外的设置。代码如下：lodidance.com

折叠展开CSS 代码复制内容到剪贴板

#menu {
font-family:Arial;
font-size:14px;
}

下面对菜单项进行设置。代码如下：

折叠展开CSS 代码复制内容到剪贴板

#menu a, #menu a:visited {
display:block;
float:left;
color:#000;
text-decoration:none;
padding:4px;
margin:4px;
border-top:8px solid #9ab;
border-bottom:8px solid #9ab;
whitewhite-space:nowrap;
}

在这段代码中，进行了如下设置。

(1) 把a元素设置为块级元素，并设置为向左浮动，这是使菜单项水平排列，并能够自动适应浏览器窗口的关键。

(2) 设置了文字的颜色和样式。

(3) 设置了内外边距。

(4) 设置了上下边框的样式，图中看到的灰色横线就是这里设置的效果。

最后，设置菜单项的鼠标经过效果，将文字的颜色从黑色变为红色，同时将上下两条粗边框变为黑色，以示和其他菜单项的区别，代码如下。

折叠展开CSS 代码复制内容到剪贴板

#menu a:hover{
color:#f00;
border-top:8px solid #000;
border-bottom:8px solid #000;
}

此时在浏览器中的效果已经正确地显示了鼠标经过效果。

分析：仔细观察图1中的间隔部分，可以看出，菜单项的水平间隔与竖直间隔相同，这个间距是由相邻的菜单项的margin构成的，根据代码可以知道，莱单项的margin是4像素。在前面的例子中曾经描述过，水平的相邻margin会相加在一起形成间隔，因此这里的水平间隔应该是8个像素；而竖直方向相邻的margin会取二者中较大者为间隔距离，这个现象称为“塌陷’。但是从这里可以看到，当盒子设为“浮动”后，即使在竖直方向上的margin相邻。也不会发生“塌陷”，否则这里的竖直间距应该是水平间距的一半，而不是现在看到的效果。这个结论请读者务必记清。

最后，请读者慢慢地把窗口由宽变窄，在某一个位置将会出现图1中所示的效果，也就是在菜单项内部发生了折行，这并不是期望的效果。解决办法是在“#menu a, #menu a:visited”的样式中增加如下CSS规则：

折叠展开CSS 代码复制内容到剪贴板