jquery implémente un magnifique menu déroulant secondaire code

jquery implémente un magnifique menu déroulant secondaire code_jquery

WBOY

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

original

1364 Les gens l'ont consulté

L'exemple de cet article décrit le code pour implémenter un magnifique menu déroulant secondaire avec jquery. Partagez-le avec tout le monde pour votre référence. Les détails sont les suivants :

Nous introduisons ici un menu déroulant de site Web basé sur jquery, style noir, très beau. Ce menu doit cliquer sur le petit symbole triangulaire derrière le menu principal pour dérouler le menu secondaire. la souris remonte dans le menu principal. Je viens de le faire glisser. Quant à savoir lequel, tout dépend des préférences personnelles.

Jetons d'abord un coup d'œil à l'effet de course :

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

http://demo.jb51.net/js/2015/jquery-bg-2-level-down-show-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 type="text/javascript" src="jquery-1.6.2.min.js"></script> 
<script type="text/javascript"> 
$(document).ready(function(){
 $("ul.subnav").parent().append("<span></span>");
 $("ul.topnav li span").click(function() {
  $(this).parent().find("ul.subnav").slideDown('fast').show();
  $(this).parent().hover(function() {
  }, function(){ 
   $(this).parent().find("ul.subnav").slideUp('slow');
  });
  }).hover(function() { 
   $(this).addClass("subhover");
  }, function(){
   $(this).removeClass("subhover");
 });
});
</script>
<style type="text/css">
body {
 margin: 0; padding: 0;
 font: 10px normal Arial, Helvetica, sans-serif;
 background: #ddd url(images/body_bg.gif) repeat-x;
}
.container {
 width: 960px;
 margin: 0 auto;
 position: relative;
}
#header {
 padding-top: 120px;
}
#header .disclaimer {
 color: #999;
 padding: 100px 0 7px 0;
 text-align: right;
 display: block;
 position: absolute;
 top: 0; right: 0;
}
#header .disclaimer a { color: #ccc;}
ul.topnav {
 list-style: none;
 padding: 0 20px; 
 margin: 0;
 float: left;
 width: 920px;
 background: #222;
 font-size: 1.2em;
 background: url(images/topnav_bg.gif) repeat-x;
}
ul.topnav li {
 float: left;
 margin: 0; 
 padding: 0 15px 0 0;
 position: relative;
}
ul.topnav li a{
 padding: 10px 5px;
 color: #fff;
 display: block;
 text-decoration: none;
 float: left;
}
ul.topnav li a:hover{
 background: url(images/topnav_hover.gif) no-repeat center top;
}
ul.topnav li span {
 width: 17px;
 height: 35px;
 float: left;
 background: url(images/subnav_btn.gif) no-repeat center top;
}
ul.topnav li span.subhover {background-position: center bottom; cursor: pointer;}
ul.topnav li ul.subnav {
 list-style: none;
 position: absolute;
 left: 0; top: 35px;
 background: #333;
 margin: 0; padding: 0;
 display: none;
 float: left;
 width: 170px;
 -moz-border-radius-bottomleft: 5px;
 -moz-border-radius-bottomright: 5px;
 -webkit-border-bottom-left-radius: 5px;
 -webkit-border-bottom-right-radius: 5px;
 border: 1px solid #111;
}
ul.topnav li ul.subnav li{
 margin: 0; padding: 0;
 border-top: 1px solid #252525;
 border-bottom: 1px solid #444;
 clear: both;
 width: 170px;
}
html ul.topnav li ul.subnav li a {
 float: left;
 width: 145px;
 background: #333 url(images/dropdown_linkbg.gif) no-repeat 10px center;
 padding-left: 20px;
}
html ul.topnav li ul.subnav li a:hover {
 background: #222 url(images/dropdown_linkbg.gif) no-repeat 10px center; 
}
#header img {
 margin: 20px 0 10px;
}
</style>
</head>
<body>
<div class="container">
 <div id="header">
 <ul class="topnav">
  <li><a href="#">网站首页</a></li>
  <li>
  <a href="#">网页菜单</a>
  <ul class="subnav">
   <li><a href="#">ASP导航</a></li>
   <li><a href="#">JSP导航</a></li>
   <li><a href="#">ASP.net导航</a></li>
   <li><a href="#">PHP导航</a></li>
  </ul>
  </li>
  <li>
  <a href="#">网页特效</a>
  <ul class="subnav">
   <li><a href="#">层和菜单</a></li>
   <li><a href="#">鼠标特效</a></li>
   <li><a href="#">表单特效</a></li>
   <li><a href="#">表格特效</a></li>
   <li><a href="#">CSS特效</a></li>
   <li><a href="#">jQuery特效</a></li>
  </ul>
  </li>
  <li><a href="#">搜索引擎</a></li>
  <li><a href="#">博客营销</a></li>
  <li><a href="#">联系我们</a></li>
 </ul>
 </div>
</div>
</body>
</html>

Copier après la connexion

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