jquery實現(xiàn)的淡入淡出下拉菜單效果
本文實例講述了jquery實現(xiàn)的淡入淡出下拉菜單效果。分享給大家供大家參考。具體如下:
這是一款jQuery帶有淡入淡出效果的下拉菜單,可作為一個下拉導航菜單的模板,移動鼠標到一級主菜單上看一看,在有包括二級子菜單的菜單項上懸停時,二級菜單漸變顯示出來,兼容性也是很不錯的,希望大家喜歡哈。
運行效果截圖如下:
在線演示地址如下:
http://demo.jb51.net/js/2015/jquery-fade-in-out-menu-style-codes/
具體代碼如下:
<!DOCTYPE html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>jQuery下拉菜單效果</title> <style> body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, textarea, p, blockquote, th, td{margin:0; padding:0} table{border-collapse:collapse; border-spacing:0} fieldset, img{border:0} address, caption, cite, code, dfn, em, strong, th, var{font-style:normal; font-weight:normal} ol, ul{list-style:none} caption, th{text-align:left} h1, h2, h3, h4, h5, h6{font-size:100%; font-weight:normal} q:before, q:after{content:''} abbr, acronym{border:0} :focus{outline:0} ins{text-decoration:none} del{text-decoration:line-through} a { color: #fff; text-decoration: none; } a:hover { text-decoration: underline; } a { color: black } #nav li { float: left; position: relative; } #nav li a { background: #d6cfbd; border: 3px solid #4f4026; color: #333; display: block; margin: 0 5px 0 0; padding: 5px 8px; } #nav li a:hover { background: #f7f7f7; text-decoration: none; } #nav { display: block; height: 35px; padding: 10px 0; width: 500px; z-index: 100; position: absolute;} #nav > li > a { border-top-left-radius: 10px; border-top-right-radius: 10px; -moz-border-radius-topleft: 10px; -moz-border-radius-topright: 10px; -webkit-border-top-left-radius: 10px; -webkit-border-top-right-radius: 10px;} #nav li ul { background: #e1ddd3; border: 3px solid #4f4026; color: #333; display: none; margin: -3px 0 0 0; width: 200px; position: absolute; } #nav li ul li { width: 100% } #nav li ul li a { background: none; border: none; line-height: 30px; margin: 0; padding: 0 0 0 5px; } #nav li ul li a:hover { background: #f7f7f7;} #nav li.current > a { background: #f7f7f7; } #nav li:hover > ul.child { display: block; } </style> <!--<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js?ver=1.4.2'></script>--> <script type='text/javascript' src='jquery-1.6.2.min.js'></script> <script type="text/javascript"> $(document).ready(function(){ $("#nav ul.child").removeClass("child"); $("#nav li").has("ul").hover(function(){ $(this).addClass("current").children("ul").fadeIn(); }, function() { $(this).removeClass("current").children("ul").hide(); }); }); </script> </head> <body> <div id="page-wrap"> <div id="content"> <h2>jQuery sub-navigation with CSS fall-back</h2> <ul id="nav"> <li><a href="#">網(wǎng)站主頁</a></li> <li><a href="#">開源源碼</a> <ul class="child"> <li><a href="#">PHP源碼</a></li> <li><a href="#">ASP源碼</a></li> <li><a href="#">JSP源碼</a></li> <li><a href="#">Ajax源碼</a></li> </ul> </li> <li><a href="#">服務</a> <ul class="child"> <li><a href="#">廣告業(yè)務</a></li> <li><a href="#">Installations</a></li> <li><a href="#">Setups</a></li> </ul> </li> <li><a href="#">關于我們</a></li> <li><a href="#">Contact</a></li> </ul> </div> </div> </body> </html>
希望本文所述對大家的jquery程序設計有所幫助。
相關文章
jquery 刪除節(jié)點 添加節(jié)點 找兄弟節(jié)點的簡單實現(xiàn)
下面小編就為大家?guī)硪黄猨query 刪除節(jié)點 添加節(jié)點 找兄弟節(jié)點的簡單實現(xiàn)。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2016-12-12JQuery實現(xiàn)文字無縫滾動效果示例代碼(Marquee插件)
本篇文章主要介紹了JQuery實現(xiàn)文字無縫滾動效果示例代碼(Marquee插件),具有一定的參考價值,感興趣的小伙伴們可以參考一下。2017-03-03JQuery+drag.js上傳圖片并且實現(xiàn)圖片拖曳
這篇文章主要介紹了JQuery+drag.js上傳圖片并且實現(xiàn)圖片拖曳,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友可以參考下2020-11-11為jquery的ajax請求添加超時timeout時間的操作方法
這篇文章主要介紹了為jquery的ajax請求添加超時timeout時間的操作方法,文中通過一段簡單的代碼給大家介紹jquery ajax超時設置方法,感興趣的朋友跟隨腳本之家小編一起看看吧2018-09-09