jQuery結合CSS製作動態的下拉式選單_jquery

當要在一個有限的導覽選單空間放一個大的子選單時，我們一般會採用下拉式選單的形式來彌補空間的不足。本文將帶大家用最少的時間，使用jQuery和CSS結合製作一個動態的下拉式選單。

XHTML
首先是要在頁面的head部分引入jquery庫，這是必須的。

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

接著我使用一個無序列表來建立選單。

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

一目了然，看起來非常簡潔，由於下拉選單開始是關閉的，我還要建立一個可視的可觸發下拉的按鈕，本文為了方便直接使用了一張圖片作為觸發按鈕。並將圖片放置選單列表上部

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

CSS
分別給選單建立起CSS樣式，請看程式碼：

.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;} 

值得注意的是，.menu li.alt樣式是用來區分奇偶行換行要用的，在下文的jquery程式碼中會體現。
jQuery
在jQuery程式碼中，首先我要個下拉式選單行數來區分，分別給偶數行一個樣式：alt。接著為圖片按鈕新增點擊觸發事件，當點擊按鈕時可以切換下拉式選單。

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

注意，我使用了jQuery的slideToggle方法以滑動的方式實現選單的顯示和隱藏，效果非常流暢。

以上就是分享的jQuery結合CSS製作動態的下拉式選單，希望對大家的學習有幫助。