CSS导航菜单--应用滑动门技术的玻璃效果菜单

本例主要实现一个玻璃材质效果的水平菜单。完成的效果图如图所示：



本例中使用了两个图像，如图





这是作为菜单的背景使用得。

相应的HTML代码如下：

<ul class="item">

<li><a href="#"><span>Home</span></a></li>

<li><a href="#"><span>Contact Us</span></a></li>

<li><a href="#"><span>Web Dev</span></a></li>

<li><a href="#"><span>Web Design</span></a></li>

<li><a href="#"><span>Map</span></a></li>

</ul>

下面设置菜单的整体效果。

1， 设置文字的字体和字号，代码如下：

.item{

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

font-size:16px;

background:#ccc;

}

设置li的样式，代码如下：

.item li{

float:left;

background:url(bg.gif) repeat-x center;

padding:5px;

margin:0 auto;

list-style-type:none;

}

将a元素设置为块及元素，代码如下：

.item li a,item a:visited{

text-decoration:none;

color:#fff;

text-align:center;

display:block;

padding-top:5px;

}

现在在浏览器内效果如图：



使用“滑动门”技术设置玻璃材质背景

首先设置a元素鼠标经过效果，代码如下：

.item li a:hover{

display:block;

float:left;

background:url(bt-bg.gif) center;

overflow:hidden;

color:#000;

margin:0 auto;

}

对标记b的属性进行设置，代码如下

.item a b{

display:block;

}

鼠标经过b的样式，代码如下：

.item a:hover b{

padding:0px 20px 0px 0px;

color:#FFF;

background:url(img/bt-bj.gif) no-repeat right top;

}

这样可以得到，效果图