jQuery digabungkan dengan CSS untuk mencipta menu lungsur turun dinamik_jquery

Apabila submenu yang besar perlu diletakkan dalam ruang menu navigasi yang terhad, kami biasanya menggunakan menu lungsur untuk mengimbangi kekurangan ruang. Artikel ini akan menunjukkan kepada anda cara menggunakan jQuery dan CSS untuk mencipta menu lungsur turun dinamik dalam masa paling singkat.

XHTML
Perkara pertama ialah memperkenalkan perpustakaan jquery ke bahagian kepala halaman, yang diperlukan.

<script type="text/javascript" src="js/jquery.js"></script> 

Kemudian saya menggunakan senarai tidak tersusun untuk membina menu.

<ul class="menu"> 
  <li><a href="#">首页</a></li> 
  <li><a href="#">服务</a></li> 
  <li><a href="#">案例</a></li> 
  <li><a href="#">关于</a></li> 
  <li><a href="#">BLOG</a></li> 
</ul> 

Ia jelas sekali imbas dan kelihatan sangat mudah Memandangkan menu lungsur ditutup pada mulanya, saya juga perlu mencipta butang yang boleh dilihat yang boleh mencetuskan lungsur ke bawah Artikel ini secara langsung menggunakan gambar sebagai pencetus butang untuk kemudahan. Dan letakkan gambar di bahagian atas senarai menu

<img src="nav.gif" width="184" height="32" class="menu_head" /> 

CSS
Buat gaya CSS untuk menu masing-masing, sila lihat kod:

.menu_head{border:1px solid #998675; background:#f30} 
.menu{display:none; width:184px; border:1px solid #998675; border-top:none} 
.menu li{list-style:none; background:#493e3b} 
.menu li a{padding:10px; display:block;color:#fff; text-decoration:none;} 
.menu li a:hover{font-weight:bold;} 
.menu li.alt{background:#362f2d;} 

Perlu diingat bahawa gaya .menu li.alt digunakan untuk membezakan baris dan pemisah baris ganjil dan genap, yang akan ditunjukkan dalam kod jquery di bawah.
jQuery
Dalam kod jQuery, mula-mula saya perlu membezakan baris menu lungsur turun, dan memberikan baris genap gaya: alt. Kemudian tambahkan peristiwa pencetus klik untuk butang gambar dan menu lungsur turun boleh ditukar apabila butang diklik.

$(function(){ 
  $(".menu li:even").addClass("alt"); 
  $("img.menu_head").click(function(){ 
    $(".menu").slideToggle("fast"); 
  }); 
}); 

Nota, Saya menggunakan kaedah slideToggle jQuery untuk memaparkan dan menyembunyikan menu secara meluncur, dan kesannya sangat lancar.

Di atas ialah jQuery yang dikongsi digabungkan dengan CSS untuk mencipta menu lungsur turun dinamik, saya harap ia akan membantu pembelajaran semua orang.