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;

       }

 

这样可以得到，效果图