jQuery結合CSS制作動態(tài)的下拉菜單
更新時間：2015年10月27日 16:15:36 投稿：lijiao
這篇文章主要介紹了jQuery結合CSS制作一個動態(tài)的下拉菜單，下拉菜單可以彌補空間的不足，感興趣的小伙伴們可以參考一下
當要在一個有限的導航菜單空間放一個大的子菜單時，我們一般采用下拉菜單的形式來彌補空間的不足。本文將帶大家用最少的時間，使用jQuery和CSS結合制作一個動態(tài)的下拉菜單。
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>
一目了然，看起來非常簡潔，由于下拉菜單開始是關閉的，我還要建立一個可視的可觸發(fā)下拉的按鈕，本文為了方便直接使用了一張圖片作為觸發(fā)按鈕。并將圖片放置菜單列表上部
<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樣式是用來區(qū)分奇偶行換行要用的，在下文的jquery代碼中會體現(xiàn)。
jQuery
在jQuery代碼中，首先我要個下拉菜單行數(shù)進行區(qū)分，分別給偶數(shù)行一個樣式：alt。接著為圖片按鈕添加單擊觸發(fā)事件，當單擊按鈕時可以切換下拉菜單。
$(function(){
$(".menu li:even").addClass("alt");
$("img.menu_head").click(function(){
$(".menu").slideToggle("fast");
});
});
注意，我使用了jQuery的slideToggle方法以滑動的方式實現(xiàn)菜單的顯示和隱藏，效果非常流暢。
以上就是分享的jQuery結合CSS制作動態(tài)的下拉菜單，希望對大家的學習有所幫助。
相關文章
Jquery其實本身可以操作select表單，但是由于比較反鎖，沒有.net 控件那樣去操作方便，我在網(wǎng)上Google了一會，發(fā)現(xiàn)了一個不錯的專門操作select的插件，很好，使用過了，感覺蠻不錯的。2009-11-11
系統(tǒng)默認情況下，使用Tab按鍵切換頁面元素的焦點，有沒有想過回車鍵Enter也可以實現(xiàn)這種功能，并且具有良好的用戶體驗2014-05-05
本篇文章主要是對jQuery設置與獲取HTML,文本和值的簡單實例進行了介紹，需要的朋友可以過來參考下，希望對大家有所幫助2014-02-02
本篇文章給大家總結了關于jQuery代碼優(yōu)化方法，如果你這方面有需求，跟著小編一起學習下吧。2018-01-01
jQuery函數(shù)的第二個參數(shù)獲取指定上下文中的DOM元素
這篇文章主要介紹了jQuery函數(shù)的第二個參數(shù)獲取指定上下文中的DOM元素,需要的朋友可以參考下2014-05-05
本文給大家分享的是一則使用jQuery獲得內(nèi)容以及內(nèi)容的屬性的方法和示例，非常實用，推薦給大家。2015-02-02
這篇文章主要介紹了在JavaScript中重寫jQuery對象的方法,在某些情況下jQuery無法滿足應用開發(fā)的時候可以采用javascript重寫jQuery方法來滿足功能的實現(xiàn),需要的朋友可以參考下2014-08-08
Jquery幻燈片特效代碼分享 打開頁面隨機選擇切換方式（3）
jQuery是一個非常優(yōu)秀的 JavaScript 框架，使用簡單靈活，一個漂亮的幻燈片更能吸引訪客的注意力。本文實例講述了jQuery實現(xiàn)時尚漂亮的幻燈片特效，基本能滿足你在網(wǎng)頁上使用幻燈片(焦點圖)效果。分享給大家供大家參考。具體如下：2015-08-08
這篇文章主要介紹了jquery中checkbox全選失效的解決方法,需要的朋友可以參考下2014-12-12
jquery中一些事件函數(shù)使用小結，需要的朋友可以參考下。2009-12-12