Heim > Artikel > Web-Frontend > JS CSS implementiert einfache und praktische Javascript-Fähigkeiten für Schiebetürmenüeffekte

JS CSS implementiert einfache und praktische Javascript-Fähigkeiten für Schiebetürmenüeffekte

WBOYOriginal: 2016-05-16 15:38:521046Durchsuche

Das Beispiel in diesem Artikel beschreibt, wie Sie mit JS CSS einen einfachen und praktischen Schiebetür-Menüeffekt implementieren. Teilen Sie es als Referenz mit allen. Die Details lauten wie folgt:

Dies ist ein einfaches und praktisches CSS-JavaScript-Schiebetür-Navigationsmenü. Ich habe versucht, möglichst wenig Code zu verwenden, um Code mit guter Kompatibilität zu schreiben, und ich hoffe auch, dass Experten, die es lernen, es mögen JS kann sich mir anschließen. Voneinander lernen und uns gemeinsam verbessern.

Der Screenshot des Laufeffekts sieht wie folgt aus:

Die Online-Demo-Adresse lautet wie folgt:

http://demo.jb51.net/js/2015/js-css-simple-useful-menu-codes/

Der spezifische Code lautet wie folgt:

<html>
<head>
<title>简易实用，滑动门</title>
<meta http-equiv="Content-Type" content="text/html; charset=gbk" />
<style type="text/css">
*{margin:0;padding:0;}
a:link,a:visited{text-decoration:none;}
a:hover{text-decoration:none;}
ul{list-style:none;}
.subMenu{background:#333;float:left;padding-top:2px;width:100%;}
.subMenu li{float:left;}
.subMenu li a{display:block;float:left;color:#fff;height:25px;line-height:25px;padding:0 5px;margin-left:2px;}
.subMenu .thisStyle a {background:#fff;color:#000;}
.subContent{clear:both;border:2px solid #000;border-top:none;background:#fff;}
.subContent ul{display:none;padding:15px;line-height:180%;}
</style>
</head>
<body>
 <ul class="subMenu">
  <li class="thisStyle"><a href="javascript:void(0)">目录</a></li>
  <li><a href="javascript:void(0)">列表</a></li>
  <li><a href="javascript:void(0)">产品</a></li>
  <li><a href="javascript:void(0)">新网</a></li>
 </ul>
 <div class="subContent">
  <ul style="display:block;">
  <li><a href="#">111111</a></li>
  <li><a href="#">111111</a></li>
  <li><a href="#">111111</a></li>
  <li><a href="#">111111</a></li>
  </ul>
  <ul>
  <li><a href="#">222222</a></li>
  <li><a href="#">222222</a></li>
  <li><a href="#">222222</a></li>
  <li><a href="#">222222</a></li>
  </ul>
  <ul>
  <li><a href="#">333333</a></li>
  <li><a href="#">333333</a></li>
  <li><a href="#">333333</a></li>
  <li><a href="#">333333</a></li>
  </ul>
  <ul>
  <li><a href="#">444444</a></li>
  <li><a href="#">444444</a></li>
  <li><a href="#">444444</a></li>
  <li><a href="#">444444</a></li>
  </ul>
 </div>
<script>
function $_class(name){
 var elements = document.getElementsByTagName("*");
 for(s=0;s<elements.length;s++){
  if(elements[s].className==name){
   return  elements[s];
  } 
 }
}
//tab effects
var tabList = $_class("subMenu").getElementsByTagName("li")
 tabCon = $_class("subContent").getElementsByTagName("ul");
for(i=0;i<tabList.length;i++){
 (function(){
  var t = i;  
  tabList[t].onmouseover = function(){
   for(o=0;o<tabCon.length;o++){
    tabCon[o].style.display = "none";
    tabList[o].className = "";
    if(t==o){
     this.className = "thisStyle";
     tabCon[o].style.display = "block"; 
    }
   }
  } 
 })() 
}
</script>
</bdoy>
</html>

Ich hoffe, dass dieser Artikel für die JavaScript-Programmierung 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：Ein kleines einfaches Beispiel für den Einstieg in JQuery (1)_jqueryNächster Artikel：Ein kleines einfaches Beispiel für den Einstieg in JQuery (1)_jquery

In Verbindung stehende Artikel

Mehr sehen