js implémente des compétences code_javascript d'effet de menu déroulant secondaire concises et élégantes-js tutoriel-php.cn

js implémente des compétences code_javascript d'effet de menu déroulant secondaire concises et élégantes

WBOY

Libérer： 2016-05-16 15:41:19

original

1426 Les gens l'ont consulté

L'exemple de cet article décrit l'implémentation js d'un code d'effet de menu déroulant secondaire concis et élégant. Partagez-le avec tout le monde pour votre référence. Les détails sont les suivants :

Il s'agit d'un menu déroulant secondaire simple et élégant. Vous pouvez redéfinir la couleur du menu en fonction de vos besoins. Ici, nous vous proposons uniquement une idée pour créer un menu secondaire. L'effet global semble assez pratique, car. est le menu de navigation déroulant Couramment utilisé par tout le monde.

La capture d'écran de l'effet en cours d'exécution est la suivante :

L'adresse de la démo en ligne est la suivante :

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

Le code spécifique est le suivant :

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

Copier après la connexion

J'espère que cet article sera utile à la conception de la programmation JavaScript de chacun.