jquery melaksanakan kesan menu slaid ke bawah navigasi sekunder yang meluncur ke bawah

jquery melaksanakan kesan menu slaid ke bawah navigasi sekunder yang meluncur ke bawah_jquery

WBOY

Lepaskan： 2016-05-16 15:43:04

asal

1379 orang telah melayarinya

Contoh dalam artikel ini menerangkan cara jquery melaksanakan kesan menu slaid ke bawah navigasi sekunder. Kongsikan dengan semua orang untuk rujukan anda. Butirannya adalah seperti berikut:

Ini ialah kesan menu slaid ke bawah pada halaman web yang dilaksanakan oleh jQuery dan JavaScript yang berwarna ialah menu utama peringkat pertama Selepas mengklik, ia akan berkembang dan meluncur ke submenu peringkat kedua menu utama sekali lagi, dan ia akan Runtuhkan submenu, dari segi fungsi yang boleh dipaparkan oleh menu, sesuai untuk klasifikasi produk laman web korporat, navigasi lajur artikel berita, dsb. Pada masa ini, menu ini menyokong dua tahap Jika anda berminat, anda boleh mengembangkan lebih banyak peringkat menu sendiri.

Tangkapan skrin kesan berjalan adalah seperti berikut:

Alamat demo dalam talian adalah seperti berikut:

http://demo.jb51.net/js/2015/jquery-down-show-nav-menu-codes/

Kod khusus adalah seperti berikut:

<!DOCTYPE html>
<html>
<head>
<title>向下滑动展开的JS下滑菜单</title>
<style type="text/css">
ul#sidemenu, ul#sidemenu ul{list-style-type: none;margin: 0;padding: 0;width: 185px;}
ul#sidemenu a{display: block;text-decoration: none;}
ul#sidemenu li{margin: 5px auto;}
ul#sidemenu li a{background: #333;font-size: 12px;color: #fff;height: 28px;line-height: 28px;padding-left: 5px;}
ul#sidemenu li a: hover{background: #000;}
ul#sidemenu li ul li a{background: #ccc;color: #000;padding-left: 20px;}
ul#sidemenu li ul li a: hover{background: #aaa;border-left: 5px #000 solid;padding-left: 15px;}
</style>
</head>
<body>
<div class="leftbar">
 <ul id="sidemenu">
  <li><a href="#" >+ 网页菜单类素材一</a>       
   <ul>
     <li><a href="#">下滑菜单</a></li>
     <li><a href="#">折叠菜单</a></li>
     <li><a href="#">垂直菜单</a></li>
    </ul>
  </li>
  <li><a href="#" >+ 编程源码类资源</a>
   <ul>
    <li><a href="#">ASP源码</a></li>
    <li><a href="#">Delphi源码</a></li>
    <li><a href="#">vc++源码</a></li>
    <li><a href="#">VB源码</a></li>
   </ul>
  </li>
 </ul>
</div>
<script type="text/javascript" src="jquery-1.6.2.min.js"></script>
<script type="text/javascript">
function initMenu() {
 $('#sidemenu ul').hide();
 $('#sidemenu ul:first').hide();
 $('#sidemenu li a').click(
 function() {
  var checkElement = $(this).next();
  if((checkElement.is('ul')) && (checkElement.is(':visible'))) {
  return false;
  }
  if((checkElement.is('ul')) && (!checkElement.is(':visible'))) {
  $('#sidemenu ul:visible').slideUp('normal');
  checkElement.slideDown('normal');
  return false;
  }
  }
 );
 }
$(document).ready(function() {initMenu();});
</script>
</body>
</html>

Salin selepas log masuk

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