jQuery實(shí)現(xiàn)的簡潔下拉菜單導(dǎo)航效果代碼
本文實(shí)例講述了jQuery實(shí)現(xiàn)的簡潔下拉菜單導(dǎo)航效果。分享給大家供大家參考。具體如下:
這里使用jQuery實(shí)現(xiàn)簡潔下拉菜單導(dǎo)航效果,代碼規(guī)范,兼容性方面:支持 IE6+, Firefox 1.5+, Opera 8+, Safari 3+, Chrome 0.2+。簡潔明快的jquery網(wǎng)站菜單,請參閱代碼。
運(yùn)行效果截圖如下:
在線演示地址如下:
http://demo.jb51.net/js/2015/jquery-simple-down-show-menu-nav-codes/
具體代碼如下:
<!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=gb2312" /> <title>jQuery下拉菜單導(dǎo)航</title> <style> body{background: #6595A3;padding: 0 20px} .clear{clear: both;overflow: hidden;height: 0} #all{width: 80%;min-width: 650px;margin: 40px auto 0 auto;background: #FCFFED;padding: 20px 35px} h1{font: 26px tahoma, arial;color: #324143} p{font: 12px tahoma, arial;color: #171F26;margin-bottom: 25px} a{color: #324143} #copyright{width: 80%;min-width: 650px;margin: 0 auto;padding: 20px 35px;background: #B6C28B;font: 12px tahoma, arial;color: #324143} #copyright a{color: #324143} #copyright a: hover{color: #171F26} #jsddm{margin: 0;padding: 0} #jsddm li{float: left;list-style: none;font: 12px Tahoma, Arial} #jsddm li a{display: block;background: #324143;padding: 5px 12px;text-decoration: none;border-right: 1px solid white;width: 70px;color: #EAFFED;white-space: nowrap} #jsddm li a: hover{background: #24313C} #jsddm li ul{margin: 0;padding: 0;position: absolute;visibility: hidden;border-top: 1px solid white} #jsddm li ul li{float: none;display: inline} #jsddm li ul li a{width: auto;background: #A9C251;color: #24313C} #jsddm li ul li a: hover{background: #8EA344} </style> </head> <body> <div id="all"> <h1>jQuery簡潔下拉菜單導(dǎo)航</h1> <p>簡潔明快的jquery網(wǎng)站菜單,請參閱代碼.</p> <script src="jquery-1.6.2.min.js" type="text/javascript"></script> <script type="text/javascript"> var timeout= 500; var closetimer= 0; var ddmenuitem= 0; function jsddm_open() { jsddm_canceltimer(); jsddm_close(); ddmenuitem = $(this).find('ul').eq(0).css('visibility', 'visible');} function jsddm_close() { if(ddmenuitem) ddmenuitem.css('visibility', 'hidden');} function jsddm_timer() { closetimer = window.setTimeout(jsddm_close, timeout);} function jsddm_canceltimer() { if(closetimer) { window.clearTimeout(closetimer); closetimer = null;}} $(document).ready(function() { $('#jsddm > li').bind('mouseover', jsddm_open); $('#jsddm > li').bind('mouseout', jsddm_timer);}); document.onclick = jsddm_close; </script> </p> <ul id="jsddm"> <li><a href="#">JavaScript</a> <ul> <li><a href="#">下拉菜單</a></li> <li><a href="#">jQuery插件</a></li> <li><a href="#">Ajax Navigation</a></li> </ul> </li> <li><a href="#">Effect</a> <ul> <li><a href="#">幻燈切換</a></li> <li><a href="#">Fade Effect</a></li> <li><a href="#">Opacity Mode</a></li> <li><a href="#">下滑陰影</a></li> <li><a href="#">Semitransparent</a></li> </ul> </li> <li><a href="#">Navigation</a> <ul> <li><a href="#">Slide Effect</a></li> <li><a href="#">Fade Effect</a></li> <li><a href="#">Drop Shadow</a></li> </ul> </li> <li><a href="#">HTML/CSS</a> <ul> <li><a href="#">圖片特效</a></li> <li><a href="#">Opacity Mode</a></li> <li><a href="#">靜態(tài)網(wǎng)頁</a></li> </ul> </li> <li><a href="#" target="_blank">Help</a></li> </ul> <div class="clear"> </div> <br> <p><b>兼容:</b> IE6+, Firefox 1.5+, Opera 8+, Safari 3+, Chrome 0.2+<br> </div> </div> </body> </html>
希望本文所述對大家的jquery程序設(shè)計(jì)有所幫助。
- jquery仿京東導(dǎo)航/仿淘寶商城左側(cè)分類導(dǎo)航下拉菜單效果
- jQuery實(shí)現(xiàn)的導(dǎo)航下拉菜單效果示例
- jQuery實(shí)現(xiàn)的導(dǎo)航下拉菜單效果
- jquery實(shí)現(xiàn)二級(jí)導(dǎo)航下拉菜單效果
- jquery實(shí)現(xiàn)簡單的二級(jí)導(dǎo)航下拉菜單效果
- jquery實(shí)現(xiàn)適用于門戶站的導(dǎo)航下拉菜單效果代碼
- php+jQuery實(shí)現(xiàn)的三級(jí)導(dǎo)航欄下拉菜單顯示效果
- JQuery 浮動(dòng)導(dǎo)航欄實(shí)現(xiàn)代碼
- JQuery實(shí)現(xiàn)鼠標(biāo)滑過顯示導(dǎo)航下拉列表
- jquery實(shí)現(xiàn)固定頂部導(dǎo)航效果(仿蘑菇街)
- jQuery實(shí)現(xiàn)簡單的下拉菜單導(dǎo)航功能示例
相關(guān)文章
jquery ajax 登錄驗(yàn)證實(shí)現(xiàn)代碼
ajax 登錄驗(yàn)證實(shí)現(xiàn)代碼,這里用到了jquery,當(dāng)然如果不想用,可以參考腳本之前發(fā)布的文章。2009-09-09使用jQuery設(shè)置disabled屬性與移除disabled屬性
Readonly只針對input和textarea有效,而disabled對于所有的表單元素都有效,下面為大家介紹下使用jQuery設(shè)置disabled屬性2014-08-08jquery中輸入驗(yàn)證中一個(gè)不錯(cuò)的效果
在表單的輸入驗(yàn)證中,經(jīng)常要當(dāng)用戶沒能正確輸入后,要提示“XXXX輸入錯(cuò)誤”這一類的信息,如何能搞到動(dòng)態(tài)一點(diǎn)呢,今天發(fā)現(xiàn)jquery中的一個(gè)不錯(cuò)的效果,筆記之。2010-08-08實(shí)時(shí)監(jiān)控input框,實(shí)現(xiàn)輸入框與下拉框聯(lián)動(dòng)的實(shí)例
下面小編就為大家分享一篇實(shí)時(shí)監(jiān)控input框,實(shí)現(xiàn)輸入框與下拉框聯(lián)動(dòng)的實(shí)例,具有很好的參考價(jià)值,希望對大家有所幫助。一起跟隨小編過來看看吧2018-01-01jQuery通過控制節(jié)點(diǎn)實(shí)現(xiàn)僅在前臺(tái)通過get方法完成參數(shù)傳遞
這篇文章主要介紹了jQuery通過控制節(jié)點(diǎn)實(shí)現(xiàn)僅在前臺(tái)通過get方法完成參數(shù)傳遞的功能,實(shí)例分析了jQuery操作節(jié)點(diǎn)的技巧與控制前臺(tái)get方法傳遞參數(shù)的用法,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-02-02jQuery實(shí)現(xiàn)的回車觸發(fā)按鈕事件功能示例
這篇文章主要介紹了jQuery實(shí)現(xiàn)的回車觸發(fā)按鈕事件功能,涉及jQuery事件響應(yīng)及頁面元素屬性動(dòng)態(tài)操作相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下2018-03-03