龙盟编程博客 | 无障碍搜索 | 云盘搜索神器
快速搜索
主页 > web编程 > div+css/html >

网页左移菜单

时间:2012-12-29 08:41来源:未知 作者:admin 点击:
分享到:
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;

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


精彩图集

赞助商链接