cari

Rumah >hujung hadapan web >tutorial js >jquery melaksanakan kesan menu slaid ke bawah navigasi sekunder yang meluncur ke bawah_jquery

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

WBOY
WBOYasal
2016-05-16 15:43:041435semak imbas

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>

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：Kod kesan menu tab gelongsor halaman web mudah dilaksanakan dalam jsArtikel seterusnya：Kod kesan menu tab gelongsor halaman web mudah dilaksanakan dalam js

Artikel berkaitan

Lihat lagi