jQuery實(shí)現(xiàn)的動態(tài)伸縮導(dǎo)航菜單實(shí)例
本文實(shí)例講述了jQuery實(shí)現(xiàn)的動態(tài)伸縮導(dǎo)航菜單。分享給大家供大家參考。具體實(shí)現(xiàn)方法如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"><head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>jquery select</title> <script type="text/javascript" src="jquery-1.6.2.min.js"></script> <style type="text/css"> body {padding:10px; font-family:"宋體"} * {margin:0; padding:0; font-size:12px;} a{ color: #333;} ul,li { list-style-type:none; } .menu_list li a { display:block; line-height:30px; text-align:center; height:30px; background:#e8e8e8; border-bottom:1px solid #ccc; } .hover { background:#e8e8e8; } .div1{ height:200px; display:none; padding:5px; } .menu_list{ width:200px; background:#f2f2f2; border:1px solid #ccc; } </style> <script type="text/javascript"> $(document).ready(function() { $(".menu_list ul li").click(function() { if($(this).children(".div1").is(":hidden")) //判斷對象是顯示還是隱藏 { if(!$(this).children(".div1").is(":animated")){ //如果當(dāng)前沒有進(jìn)行動畫,則添加新動畫 $(this).children(".div1").animate({height:'show'},1000) .end().siblings().find(".div1").hide(1000);} }else{ if(!$(this).children(".div1").is(":animated")){ $(this).children(".div1").animate({height:'hide'},1000) .end().siblings().find(".div1").hide(1000);} } } ); }); </script> <div class="menu_list" id="secondpane"> <ul> <li class=""> <a href="javascript:void(0);" class="a1">網(wǎng)頁特效</a> <div class="div1">js特效,網(wǎng)頁特效</div> </li> <li class=""> <a href="javascript:void(0);" class="a1">網(wǎng)頁模板</a> <div class="div1">網(wǎng)頁模板下載</div> </li> <li class=""> <a href="javascript:void(0);" class="a1" style="border:none;">聯(lián)系我們 </a> <div class="div1" style="border-top:1px solid #ccc;">關(guān)于腳本之家</div> </li> </ul> </div> </body> </html>
希望本文所述對大家的jQuery程序設(shè)計(jì)有所幫助。
- JQuery 寫的個(gè)性導(dǎo)航菜單
- 基于jquery實(shí)現(xiàn)導(dǎo)航菜單高亮顯示(兩種方法)
- jQuery彈性滑動導(dǎo)航菜單實(shí)現(xiàn)思路及代碼
- Jquery實(shí)現(xiàn)帶動畫效果的經(jīng)典二級導(dǎo)航菜單
- 基于jQuery的簡單的列表導(dǎo)航菜單
- 純CSS打造的導(dǎo)航菜單(附j(luò)query版)
- jQuery三級下拉列表導(dǎo)航菜單代碼分享
- Jquery+CSS 創(chuàng)建流動導(dǎo)航菜單 Fluid Navigation
- jQuery實(shí)現(xiàn)簡潔的導(dǎo)航菜單效果
- jQuery漸變發(fā)光導(dǎo)航菜單的實(shí)例代碼
- 分享14個(gè)很酷的jQuery導(dǎo)航菜單插件
- jQuery實(shí)現(xiàn)的背景動態(tài)變化導(dǎo)航菜單效果
- 制作jquery遮罩層效果導(dǎo)航菜單代碼分享
- jQuery實(shí)現(xiàn)簡單漂亮的Nav導(dǎo)航菜單效果
相關(guān)文章
一些主流JS框架中DOMReady事件的實(shí)現(xiàn)小結(jié)
在實(shí)際應(yīng)用中,我們經(jīng)常會遇到這樣的場景,當(dāng)頁面加載完成后去做一些事情:綁定事件、DOM操作某些結(jié)點(diǎn)等。2011-02-02JavaScript 學(xué)習(xí)筆記之一jQuery寫法圖片等比縮放以及預(yù)加載
以前對于JavaScript總是在用到的時(shí)候在頁面上寫幾個(gè)函數(shù),基本沒考慮到函數(shù)的封裝與重用,最近有個(gè)項(xiàng)目可能對于這方面要求有點(diǎn)高,所以就研究了下類似jQuery的封裝2012-06-06jQuery獲取頁面及個(gè)元素高度、寬度的總結(jié)——超實(shí)用
這篇文章主要介紹了jQuery獲取頁面及個(gè)元素高度、寬度的總結(jié)——超實(shí)用,需要的朋友可以參考下2015-07-07jQuery焦點(diǎn)圖切換簡易插件制作過程全紀(jì)錄
本文主要講訴了本人制作一個(gè)jquery焦點(diǎn)圖切換的簡易插件的過程,十分的詳細(xì),希望對大家能有所幫助2014-08-08在一個(gè)頁面實(shí)現(xiàn)兩個(gè)zTree聯(lián)動的方法
最近發(fā)現(xiàn)項(xiàng)目中很多地方都是樹形菜單,而這些樹形菜單都是使用樹形插件zTree來制作的,下面這篇文章主要給大家介紹了關(guān)于在一個(gè)頁面實(shí)現(xiàn)兩個(gè)zTree聯(lián)動的相關(guān)資料,需要的朋友可以參考借鑒,下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧。2017-12-12jQuery實(shí)現(xiàn)鼠標(biāo)經(jīng)過提示信息的地圖熱點(diǎn)效果
這是一個(gè)升級版本,更新了一個(gè)在IE8里的小問題,加入了提示框的內(nèi)容自動換行處理(北京點(diǎn)上有演示)!估計(jì)差不多該是最后樣式了。IE6、IE8、谷歌、火狐、測試正常。2015-04-04jQuery實(shí)現(xiàn)飛機(jī)大戰(zhàn)小游戲
這篇文章主要為大家詳細(xì)介紹了jQuery實(shí)現(xiàn)飛機(jī)大戰(zhàn)小游戲,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2020-07-07解決html-jquery/js引用外部圖片時(shí)遇到看不了或出現(xiàn)403的問題
下面小編就為大家?guī)硪黄鉀Qhtml-jquery/js引用外部圖片時(shí)遇到看不了或出現(xiàn)403的問題。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-09-09EasyUI使用DataGrid實(shí)現(xiàn)動態(tài)列數(shù)據(jù)綁定
這篇文章主要介紹了EasyUI使用DataGrid實(shí)現(xiàn)動態(tài)列數(shù)據(jù)綁定的相關(guān)資料,需要的朋友可以參考下2022-08-08