js melaksanakan kemahiran kod_javascript kesan menu lungsur menengah yang ringkas dan elegan-tutorial js-php.cn

js melaksanakan kemahiran kod_javascript kesan menu lungsur menengah yang ringkas dan elegan

WBOY

Lepaskan： 2016-05-16 15:41:19

asal

1408 orang telah melayarinya

Contoh dalam artikel ini menerangkan pelaksanaan js kod kesan menu lungsur menengah yang ringkas dan elegan. Kongsikan dengan semua orang untuk rujukan anda. Butirannya adalah seperti berikut:

Ini ialah menu drop-down sekunder yang ringkas dan elegan Anda boleh mentakrifkan semula warna menu mengikut keperluan anda Di sini kami hanya memberikan anda idea untuk membuat menu sekunder ialah menu navigasi lungsur yang biasa digunakan oleh semua orang.

Tangkapan skrin kesan berjalan adalah seperti berikut:

Alamat demo dalam talian adalah seperti berikut:

http://demo.jb51.net/js/2015/js-simple-2level-show-down-menu-codes/

Kod khusus adalah seperti berikut:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>简洁大方的二级下拉菜单</title>
<meta http-equiv="content-type" content="text/html;charset=gb2312">
<style type="text/css">
*{margin:0;padding:0;font-style:normal;font-family:宋体;}
body{text-align:center;font-size:14px;}
#content{margin:0 auto;width:600px;}
#content #nav{background:#006400;height:32px;margin-top:10px;}
#content #nav ul{list-style:none;}
#content #nav ul li{float:left;width:100px;line-height:32px;position:relative;}
#nav div{width:100px;position:absolute;left:0px;padding-bottom:0px;background:#006400;float:left;height:0;overflow:hidden;}
#content #nav li .a{text-decoration:none;color:#00CD00;line-height:32px;display:block;border-right:1px solid #009800;}
#nav div a{text-decoration:none;color:#00CD00;line-height:26px;display:block;}
#nav div a:hover{background:#005400;}
</style>
</head>
<body>
<div id="content">
 <div id="nav">
  <ul id="supnav">
   <li><a href="#" class="a">菜单项1</a>
    <div>
     <a href="#">菜单测试1</a>
     <a href="#">菜单测试1</a>
     <a href="#">菜单测试1</a>
    </div>
   </li>
   <li><a href="#" class="a">菜单项2</a>
    <div>
     <a href="#">菜单测试2</a>
     <a href="#">菜单测试2</a>
     <a href="#">菜单测试2</a>
    </div>
   </li>
   <li><a href="#" class="a">菜单项3</a>
    <div>
     <a href="#">菜单测试3</a>
     <a href="#">菜单测试3</a>
     <a href="#">菜单测试3</a>
     <a href="#">菜单测试3</a>
     <a href="#">菜单测试3</a>
    </div>
   </li>
   <li><a href="#" class="a">菜单项4</a>
    <div>
     <a href="#">菜单测试4</a>
     <a href="#">菜单测试4</a>
     <a href="#">菜单测试4</a>
    </div>
   </li>
   <li><a href="#" class="a">菜单项5</a>
    <div>
     <a href="#">菜单测试5</a>
     <a href="#">菜单测试5</a>
     <a href="#">菜单测试5</a>
     <a href="#">菜单测试5</a>
    </div>
   </li>
   <li><a href="#" class="a">菜单项6</a>
    <div>
     <a href="#">菜单测试6</a>
     <a href="#">菜单测试6</a>
     <a href="#">菜单测试6</a>
    </div>
   </li>
  </ul>
 </div>
</div>
<script type="text/javascript">
var supnav=document.getElementById("supnav");
var nav=document.getElementById("nav");
var btns=document.getElementsByTagName("li");
var subnavs=nav.getElementsByTagName("div");
var paddingbottom=20;
var defaultHeight=0;
function drop(obj,ivalue){
 var a=obj.offsetHeight;
 var speed=(ivalue-obj.offsetHeight)/8;
 a+=Math.floor(speed);
 obj.style.height=a+"px";
}
window.onload=function(){
 for(var i=0;i<btns.length;i++){
  btns[i].index=i;
  btns[i].onmouseover=function(){
   var osubnav=subnavs[this.index];
   var sublinks=osubnav.getElementsByTagName("a");
   if(osubnav.firstChild.tagName==undefined){
    var itarheight=parseInt(osubnav.childNodes[1].offsetHeight)*sublinks.length+paddingbottom;
   }else{
    var itarheight=parseInt(osubnav.firstChild.offsetHeight)*sublinks.length+paddingbottom;
   }
   clearInterval(this.itimer);
   this.itimer=setInterval(function(){drop(osubnav,itarheight);},30);
  }
  btns[i].onmouseout=function(){
   var osubnav=subnavs[this.index];
   clearInterval(this.itimer);
   this.itimer=setInterval(function(){drop(osubnav,defaultHeight);},30);
  }
 }
}
</script>
</body>
</html>

Salin selepas log masuk

Saya harap artikel ini akan membantu reka bentuk pengaturcaraan JavaScript semua orang.