CSS导航菜单—自适应水平菜单

 

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

图1.1 自动适用水平菜单效果

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

<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>

  接下来设置#menu容器。由于宽度自动水平适用，所以不用设置。代码如下：

#menu {

       font-family:Arial, Helvetica, sans-serif;

       font-size:14px;

｝

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

#menu a,#menu a:visited {

    display:block;

    float:left;

    color:#000;

    text-decoration:none;

    padding:5px;

    margin:5px;

    border-top:8px solid #9ab;

    border-bottom:8px solid #9ab;

    white-space:nowrap;

}

最后设置鼠标经过后的效果，代码如下：

#menu a:hover{

    color:#F00;

    border-bottom:solid 8px #000;

    border-top:solid 8px #000;

}

此时在浏览器中的效果如图1.2所示。

                                      图1.2  鼠标经过效果完成

最后，如果读者慢慢地把窗口由宽变窄，会在某个位置出现图1.3所示左图这个效果，这并不是我们想要得效果，而解决办法是

“#menu a，#menu a：visited” 的样式中曾加如下CSS规则：

这条规则的含义是，单词在空白处不换行，这时效果就如图所示。

图1.3  禁止在菜单项内部折行

至此，本例就完成了。