Rumah > Artikel > hujung hadapan web > jquery melaksanakan menu drop-down sekunder yang cantik code_jquery

jquery melaksanakan menu drop-down sekunder yang cantik code_jquery

WBOYasal: 2016-05-16 15:42:201297semak imbas

Contoh dalam artikel ini menerangkan kod untuk melaksanakan menu lungsur sekunder yang cantik dengan jquery. Kongsikan dengan semua orang untuk rujukan anda. Butirannya adalah seperti berikut:

Di sini kami memperkenalkan menu drop-down laman web berdasarkan jquery, gaya hitam, sangat cantik Menu ini perlu mengklik pada simbol segitiga kecil di belakang menu utama untuk menarik ke bawah menu kedua, tetapi tetikus bergerak ke atas menu utama saya hanya meleretnya untuk yang mana, semuanya bergantung pada pilihan peribadi

Mari kita lihat kesan larian dahulu:

Alamat demo dalam talian adalah seperti berikut:

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

Kod khusus adalah seperti berikut:

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

Saya harap artikel ini akan membantu reka bentuk pengaturcaraan jquery semua orang.

Kenyataan：

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel sebelumnya：Melaksanakan wizard pendaftaran langkah demi langkah berdasarkan jquery - kod sumber attached_jqueryArtikel seterusnya：Melaksanakan wizard pendaftaran langkah demi langkah berdasarkan jquery - kod sumber attached_jquery

Artikel berkaitan

Lihat lagi