比较好的菜单滑动

最新推荐文章于 2023-12-11 06:00:00 发布

YANGZHONGBAO411

最新推荐文章于 2023-12-11 06:00:00 发布

阅读量437

点赞数

文章标签： class div function menu null

本文链接：https://blog.csdn.net/YANGZHONGBAO411/article/details/4555933

版权

<html>
<head>
<title>sl.menu</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<style type="text/css">

</style>
<script>
function closeIt(){
if(changing) return false;
changinge=e;
changing=true;
doClose();
}
function doClose(){
changinge.style.posHeight-=showstep;
if(changinge.style.posHeight>menuitemHeight) TimeFlag=setTimeout("doClose()",1);
  else {changinge.openState="close";changing=false;curOpen=null;}
}
function openIt(){
if(changing) return false;
if(curOpen!=null) { changinge=curOpen;changing=true;doClose();}
checkIt();
}
function checkIt(){
if(changing) setTimeout("checkIt()",1) ;
  else {
  iHeight=subitemHeight*(e.children.length-1)+menuitemHeight;
  changinge=e;changing=true;
  changinge.style.posHeight=menuitemHeight;doOpen();
  }
}
function doOpen(){
changinge.style.posHeight+=showstep;
if(changinge.style.posHeight<iHeight) TimeFlag=setTimeout("doOpen()",1);
  else {changinge.openState="open"; changing=false; curOpen=changinge;}
}
function slMosDown(){
e=event.srcElement;
if(e.className=="menuitem"){e=e.parentElement;
  if(e.openState=="open") closeIt();else openIt(e);
}
}
var curOpen=null;
changing=false;
subitemHeight=14;
menuitemHeight=24;
showstep=4;
</script>
<script>
function doMosOver(){
o=event.srcElement;
if(o.className=="subitem") o.className="subitem2";
}
function doMosOut(){
o=event.srcElement;
if(o.className=="subitem2") o.className="subitem";
}
document.οnmοuseοver=doMosOver;
document.οnmοuseοut=doMosOut;
</script>
</head>
<body bgcolor="#FFFFFF" text="#000000" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<div id="slmenu_1" style="position:absolute; z-index:1; left: 68px; top: 78px" onselectstart="return false;" οnmοusedοwn="slMosDown()">
<div class="item">
   <div class="menuitem">MENU ITEM 1</div>
   <div class="subitem">SUB ITEM</div>
   <div class="subitem">SUB ITEM</div>
   <div class="subitem">SUB ITEM</div>
   <div class="subitem">SUB ITEM</div>
</div>
<div class="item">
   <div class="menuitem">MENU ITEM 2</div>
   <div class="subitem">SUB ITEM</div>
   <div class="subitem">SUB ITEM</div>
   <div class="subitem">SUB ITEM</div>
   <div class="subitem">SUB ITEM</div>
   <div class="subitem">SUB ITEM</div>
</div>
<div class="item">
   <div class="menuitem">MENU ITEM 3</div>
   <div class="subitem">SUB ITEM</div>
   <div class="subitem">SUB ITEM</div>
   <div class="subitem">SUB ITEM</div>
</div>
<div class="item">
   <div class="menuitem">MENU ITEM 4</div>
   <div class="subitem">SUB ITEM</div>
   <div class="subitem">SUB ITEM</div>
   <div class="subitem">SUB ITEM</div>
</div>
</div>