jQuery implementiert den Navigationsmenüeffekt im Tag-Stil code

jQuery implementiert den Navigationsmenüeffekt im Tag-Stil code_jquery

WBOY

Freigeben： 2016-05-16 15:42:44

Original

967 Leute haben es durchsucht

Das Beispiel in diesem Artikel beschreibt die jQuery-Implementierung des Navigationsmenüeffektcodes im Tag-Stil. Teilen Sie es als Referenz mit allen. Die Details lauten wie folgt:

Dies ist ein Website-Navigationsmenü, das dem auf Jquery basierenden TAB-Tag-Stil ähnelt. Wenn nach dem Ausführen des Codes in der oberen linken Ecke ein Fehler angezeigt wird, aktualisieren Sie die Seite. Sie können auf das Menü klicken, um den Gesamteffekt zu sehen. Nach dem Klicken verschiebt sich der entsprechende Menüpunkt nach unten und kann zu einem sekundären Menü erweitert oder in ein TAB-Label-Layout geändert werden. Interessierte Freunde können es selbst studieren.

Der Screenshot des Laufeffekts sieht wie folgt aus:

Die Online-Demo-Adresse lautet wie folgt:

http://demo.jb51.net/js/2015/jquery-bq-style-nav-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>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>jquery标签式导航菜单</title>
 <script src="jquery-1.6.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
 $(".menubt").click(function(){
  $(this).blur();
  if($(this).siblings("div").css("display") == "none") {
   $(".menucount:visible").slideUp(200,function(){ $(this).parent().css("zIndex","100");});
   $(this).siblings("div").slideDown(200,function(){ $(this).parent().css("zIndex","10");});
   $(this).siblings("div").attr("id","#boxOpen");
  } else {
   $(this).siblings("div").slideUp(200,function(){ $(this).parent().css("zIndex","100");});
  }
 })
})
</script>
<style type="text/css">
body{margin:0;padding:0;}
.menubox{position:absolute;width:100%;z-index:100;}
.menucount{display:none;height:80px;overflow:hidden;background:#999999;}
#boxOpen{height:80px;display:block;}
.menubt{display:block;float:right;position:absolute;display:block;background:url(images/menubg23.gif);color:#FFFFFF;text-decoration:none;width:78px;height:21px;text-align:center;font-size:12px;}
.menubtOpen{display:block;float:right;position:absolute;display:block;background:#0066FF;color:#FFFFFF;text-decoration:none;width:50px;}
</style>
</head>
<body>
<div class="menubox">
<div class="menucount"></div>
<a class="menubt" style="right:240px;" href="#">菜单一</a>
</div>
<div class="menubox">
<div class="menucount"></div>
<a class="menubt" style="right:160px;" href="#">菜单二</a>
</div>
<div class="menubox">
<div class="menucount"></div>
<a class="menubt" style="right:80px;" href="#">菜单三</a>
</div>
<div class="menubox">
<div class="menucount"></div>
<a class="menubt" style="right:0;" href="#">菜单四</a>
</div>
<p>若左下角有错误，请刷新本页面，点击菜单可查看效果。</p>
<p> </p>
<p> </p>
<table width="728" border="0" align="center" cellpadding="0" cellspacing="0">
 <tr>
 <td>
 <p align="center"></p>
 <p align="center"></p></td>
 </tr>
</table>
<p> </p>
</body>
</html>

Nach dem Login kopieren

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