suchen

Heim  >  Artikel  >  Web-Frontend  >  js implementiert prägnante und elegante sekundäre Dropdown-Menüeffekte, Code_Javascript-Fähigkeiten

js implementiert prägnante und elegante sekundäre Dropdown-Menüeffekte, Code_Javascript-Fähigkeiten

WBOY
WBOYOriginal
2016-05-16 15:41:191411Durchsuche

Das Beispiel in diesem Artikel beschreibt die js-Implementierung eines prägnanten und eleganten sekundären Dropdown-Menüeffektcodes. Teilen Sie es als Referenz mit allen. Die Details lauten wie folgt:

Dies ist ein einfaches und elegantes sekundäres Dropdown-Menü. Sie können die Farbe des Menüs entsprechend Ihren Anforderungen neu definieren. Hier geben wir Ihnen nur eine Idee für die Erstellung eines sekundären Menüs ist das Dropdown-Navigationsmenü, das häufig von allen verwendet wird.

Der Screenshot des Laufeffekts sieht wie folgt aus:

Die Online-Demo-Adresse lautet wie folgt:

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

Der spezifische Code lautet wie folgt: 

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

Ich hoffe, dass dieser Artikel für das JavaScript-Programmierdesign aller hilfreich sein wird.

Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：js jquery ruft die Geschwisterebene des aktuellen Elements ab, vorheriges nächstes element_jqueryNächster Artikel：js jquery ruft die Geschwisterebene des aktuellen Elements ab, vorheriges nächstes element_jquery

In Verbindung stehende Artikel

Mehr sehen