jQuery implémente l'effet de menu de navigation de style balise code

jQuery implémente l'effet de menu de navigation de style balise code_jquery

WBOY

Libérer： 2016-05-16 15:42:44

original

921 Les gens l'ont consulté

L'exemple de cet article décrit l'implémentation jQuery du code d'effet de menu de navigation de style balise. Partagez-le avec tout le monde pour votre référence. Les détails sont les suivants :

Il s'agit d'un menu de navigation de site Web similaire au style de balise TAB implémenté sur la base de jquery. Si une erreur s'affiche dans le coin supérieur gauche après l'exécution du code, actualisez la page et ce sera normal. Vous pouvez cliquer sur le menu pour voir l'effet global. Après avoir cliqué, l'élément de menu correspondant descend et peut être développé dans un menu secondaire ou modifié en une disposition d'étiquette TAB. Les amis intéressés peuvent l'étudier eux-mêmes.

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/jquery-bq-style-nav-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>
<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>

Copier après la connexion

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