category: web开发
CSS实现滑动伸缩菜单
先看图：
演示地址：http://www.5key.net/ex/6-30/
测试 IE6.0、IE7.0、FF通过
CSS:
body{
padding:0px;
margin:0px;
font-size:12px;
font-family:Arial, Helvetica, sans-serif;}
a:link{
color:red;
text-decoration:none;
}
a:visited{
color:red;
text-decoration:none;
}
a:hover{
color:#333;
text-decoration:underline;
}
div.toolbar{
background-image:url(bg_toolbar.gif);
width:292px;
height:16px;
padding:6px 0px 2px 10px;
position:absolute;
cursor:hand;
z-index:1;
margin-top:10px;
margin-left:-250px;
word-spacing:10px;
}
.tool1{
margin-top:10px;
background-image:url(bg_toolbar.gif);
width:292px;
height:16px;
padding:6px 0px 2px 10px;
position:absolute;
cursor:hand;
z-index:1;
word-spacing:10px;
}
.tool2{
margin-top:10px;
margin-left:-250px;
background-image:url(bg_toolbar.gif);
position:absolute;
cursor:hand;
z-index:1;
width:292px;
height:16px;
padding:6px 0px 2px 10px;
word-spacing:10px;
}
代码：
<div class=”toolbar” onMouseOver=”this.className=’tool1′” onMouseOut=”this.className=’tool2′”><a href=”#” mce_href=”#”>复制地址</a> <a href=”#” mce_href=”#”>加入收藏</a> <a href=”#” mce_href=”#”>推荐給朋友</a></div>