代码如下
复制代码
<style>
#flo{position:absolute;top:50%;left:0px;z-index:1;background:green;width:10px;height:100px;border:1px solid black;overflow:hidden;}
#ulmenu{margin:0px;padding:0px;margin-left:0px;}
#flo li{position:relative;top:0px;left:0px;z-index:1;border-bottom:1px solid #fff;list-style:none;width:100px;text-align:center;display:}
#flo li a{display:block;}
#flo li a:hover{background:#f5f5f5;}
</style>
<div id="flo">
<ul id="ulmenu">
<li><a href="#">open</a></li>
<li><a href="#">open</a></li>
<li><a href="#">open</a></li>
<li><a href="#">open</a></li>
<li><a href="#">open</a></li>
<li><a href="#">open</a></li>
<li><a href="#">open</a></li>
</ul>
</div>
<SCRIPT>
var floats=document.getElementById("flo");
var ulmenus=document.getElementById("ulmenu");
var a=0;
window.onload=function(){
floats.onmouseover=function(){
Open();
}
floats.onmouseout=function(){
closes();
}
}
function Open(){
var widths=parseInt(floats.currentStyle.width);
if(widths<100){
widths += 5; //数字大则速度快
floats.style.width=widths;
clearInterval(a);
a=setInterval("Open()",1);
}
}
function closes(){
var widths=parseInt(floats.currentStyle.width);
if(widths>10){
widths -= 5; //数字大则速度快
floats.style.width=widths;
clearInterval(a);
a=setInterval("closes()",1);
}
}
</SCRIPT>
