jQuery實(shí)現(xiàn)美觀的多級動畫效果菜單代碼
本文實(shí)例講述了jQuery實(shí)現(xiàn)多級動畫效果菜單代碼。分享給大家供大家參考。具體如下:
這是基于jQuery實(shí)現(xiàn)的一款多級動畫菜單源代碼,動畫效果流暢,確實(shí)不錯(cuò)的動畫菜單,歡迎大家試用。這種菜單 一般應(yīng)用于大站,不過如果你的站點(diǎn)內(nèi)容比較多,也是可以考慮的哦。
運(yùn)行效果截圖如下:
在線演示地址如下:
http://demo.jb51.net/js/2015/jquery-nlevel-animate-menu-style-codes/
具體代碼如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html> <head> <title>多級的動畫菜單代碼</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/> <style> *{ padding:0; margin:0; } body{ background:#f0f0f0; font-family:"Helvetica Neue",Arial,Helvetica,Geneva,sans-serif; overflow-x:hidden; } h1{ font-size:180px; line-height:180px; text-transform: uppercase; color:#f9f9f9; position:absolute; text-shadow:0 1px 1px #ddd; top:-25px; left:-20px; white-space: nowrap; } span.reference{ position:fixed; left:10px; bottom:10px; font-size:11px; } span.reference a{ color:#DF7B61; text-decoration:none; text-transform: uppercase; text-shadow:0 1px 0 #fff; } span.reference a:hover{ color:#000; } .box{ margin-top:129px; height:460px; width:100%; position:relative; background:#fff url(images/click.png) no-repeat 380px 180px; -moz-box-shadow:0px 0px 10px #aaa; -webkit-box-shadow:0px 0px 10px #aaa; -box-shadow:0px 0px 10px #aaa; } .box h2{ color:#f0f0f0; padding:40px 10px; text-shadow:1px 1px 1px #ccc; } ul.ldd_menu{ margin:0px; padding:0; display:block; height:50px; background-color:#D04528; list-style:none; font-family:"Trebuchet MS", sans-serif; border-top:1px solid #EF593B; border-bottom:1px solid #EF593B; border-left:10px solid #D04528; -moz-box-shadow:0px 3px 4px #591E12; -webkit-box-shadow:0px 3px 4px #591E12; -box-shadow:0px 3px 4px #591E12; } ul.ldd_menu a{ text-decoration:none; } ul.ldd_menu > li{ float:left; position:relative; } ul.ldd_menu > li > span{ float:left; color:#fff; background-color:#D04528; height:50px; line-height:50px; cursor:default; padding:0px 20px; text-shadow:0px 0px 1px #fff; border-right:1px solid #DF7B61; border-left:1px solid #C44D37; } ul.ldd_menu .ldd_submenu{ position:absolute; top:50px; width:550px; display:none; opacity:0.95; left:0px; font-size:10px; background: #C34328; border-top:1px solid #EF593B; -moz-box-shadow:0px 3px 4px #591E12 inset; -webkit-box-shadow:0px 3px 4px #591E12 inset; -box-shadow:0px 3px 4px #591E12 inset; } a.ldd_subfoot{ background-color:#f0f0f0; color:#444; display:block; clear:both; padding:15px 20px; text-transform:uppercase; font-family: Arial, serif; font-size:12px; text-shadow:0px 0px 1px #fff; -moz-box-shadow:0px 0px 2px #777 inset; -webkit-box-shadow:0px 0px 2px #777 inset; -box-shadow:0px 0px 2px #777 inset; } ul.ldd_menu ul{ list-style:none; float:left; border-left:1px solid #DF7B61; margin:20px 0px 10px 30px; padding:10px; } li.ldd_heading{ font-family: Georgia, serif; font-size: 13px; font-style: italic; color:#FFB39F; text-shadow:0px 0px 1px #B03E23; padding:0px 0px 10px 0px; } ul.ldd_menu ul li a{ font-family: Arial, serif; font-size:10px; line-height:20px; color:#fff; padding:1px 3px; } ul.ldd_menu ul li a:hover{ -moz-box-shadow:0px 0px 2px #333; -webkit-box-shadow:0px 0px 2px #333; box-shadow:0px 0px 2px #333; background:#AF412B; } </style> </head> <body> <h1>UI Elements</h1> <div class="box"> <h2>Large Drop Down Menu Demo</h2> <ul id="ldd_menu" class="ldd_menu"> <li> <span>Vacations</span><!-- Increases to 510px in width--> <div class="ldd_submenu"> <ul> <li class="ldd_heading">By Location</li> <li><a href="#">South America</a></li> <li><a href="#">Antartica</a></li> <li><a href="#">Africa</a></li> <li><a href="#">Asia and Australia</a></li> <li><a href="#">Europe</a></li> </ul> <ul> <li class="ldd_heading">By Category</li> <li><a href="#">Sun & Beach</a></li> <li><a href="#">Adventure</a></li> <li><a href="#">Science & Education</a></li> <li><a href="#">Extreme Sports</a></li> <li><a href="#">Relaxing</a></li> <li><a href="#">Spa and Wellness</a></li> </ul> <ul> <li class="ldd_heading">By Theme</li> <li><a href="#">Paradise Islands</a></li> <li><a href="#">Cruises & Boat Trips</a></li> <li><a href="#">Wild Animals & Safaris</a></li> <li><a href="#">Nature Pure</a></li> <li><a href="#">Helping others & For Hope</a></li> <li><a href="#">Diving</a></li> </ul> <a class="ldd_subfoot" href="#"> + New Deals</a> </div> </li> <li> <span>Equipment</span> <div class="ldd_submenu"> <ul> <li class="ldd_heading">By Location</li> <li><a href="#">South America</a></li> <li><a href="#">Antartica</a></li> <li><a href="#">Africa</a></li> <li><a href="#">Asia and Australia</a></li> <li><a href="#">Europe</a></li> </ul> <ul> <li class="ldd_heading">By Category</li> <li><a href="#">Sun & Beach</a></li> <li><a href="#">Adventure</a></li> <li><a href="#">Science & Education</a></li> <li><a href="#">Extreme Sports</a></li> <li><a href="#">Relaxing</a></li> <li><a href="#">Spa and Wellness</a></li> </ul> <ul> <li class="ldd_heading">By Theme</li> <li><a href="#">Paradise Islands</a></li> <li><a href="#">Cruises & Boat Trips</a></li> <li><a href="#">Wild Animals & Safaris</a></li> <li><a href="#">Nature Pure</a></li> <li><a href="#">Helping others & For Hope</a></li> <li><a href="#">Diving</a></li> </ul> <a class="ldd_subfoot" href="#"> + New Deals</a> </div> </li> <li> <span>Locations</span> <div class="ldd_submenu"> <ul> <li class="ldd_heading">By Location</li> <li><a href="#">South America</a></li> <li><a href="#">Antartica</a></li> <li><a href="#">Africa</a></li> <li><a href="#">Asia and Australia</a></li> <li><a href="#">Europe</a></li> </ul> <ul> <li class="ldd_heading">By Category</li> <li><a href="#">Sun & Beach</a></li> <li><a href="#">Adventure</a></li> <li><a href="#">Science & Education</a></li> <li><a href="#">Extreme Sports</a></li> <li><a href="#">Relaxing</a></li> <li><a href="#">Spa and Wellness</a></li> </ul> <ul> <li class="ldd_heading">By Theme</li> <li><a href="#">Paradise Islands</a></li> <li><a href="#">Cruises & Boat Trips</a></li> <li><a href="#">Wild Animals & Safaris</a></li> <li><a href="#">Nature Pure</a></li> <li><a href="#">Helping others & For Hope</a></li> <li><a href="#">Diving</a></li> </ul> <a class="ldd_subfoot" href="#"> + New Deals</a> </div> </li> </ul> </div> <!-- The JavaScript --> <script type="text/javascript" src="jquery-1.6.2.min.js"></script> <script type="text/javascript"> $(function() { /** * the menu */ var $menu = $('#ldd_menu'); /** * for each list element, * we show the submenu when hovering and * expand the span element (title) to 510px */ $menu.children('li').each(function(){ var $this = $(this); var $span = $this.children('span'); $span.data('width',$span.width()); $this.bind('mouseenter',function(){ $menu.find('.ldd_submenu').stop(true,true).hide(); $span.stop().animate({'width':'510px'},300,function(){ $this.find('.ldd_submenu').slideDown(300); }); }).bind('mouseleave',function(){ $this.find('.ldd_submenu').stop(true,true).hide(); $span.stop().animate({'width':$span.data('width')+'px'},300); }); }); }); </script> </body> </html>
希望本文所述對大家的jquery程序設(shè)計(jì)有所幫助。
- Jquery左右滑動插件之實(shí)現(xiàn)超級炫酷動畫效果附源碼下載
- jquery動畫效果學(xué)習(xí)筆記(8種效果)
- jQuery實(shí)現(xiàn)切換頁面過渡動畫效果
- jQuery實(shí)現(xiàn)彩帶延伸效果的網(wǎng)頁加載條loading動畫
- jQuery實(shí)現(xiàn)有動畫淡出效果的二級折疊菜單代碼
- jQuery實(shí)現(xiàn)連續(xù)動畫效果實(shí)例分析
- jQuery實(shí)現(xiàn)帶動畫效果的多級下拉菜單代碼
- jQuery實(shí)現(xiàn)帶有洗牌效果的動畫分頁實(shí)例
- jquery實(shí)現(xiàn)動畫菜單的左右滾動、漸變及圖形背景滾動等效果
- 再JavaScript的jQuery庫中編寫動畫效果的指南
- jQuery基于ajax實(shí)現(xiàn)帶動畫效果無刷新柱狀圖投票代碼
- jQuery動畫效果相關(guān)方法實(shí)例分析
相關(guān)文章
jQuery實(shí)現(xiàn)的支持IE的html滑動條
本文給大家分享的是一段使用jQuery實(shí)現(xiàn)支持IE的html滑動條代碼,效果非常不錯(cuò),這里推薦給大家,希望大家能夠喜歡。2015-03-03遍歷json獲得數(shù)據(jù)的幾種方法小結(jié)
下面小編就為大家?guī)硪黄闅vjson獲得數(shù)據(jù)的幾種方法小結(jié)。小編覺得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-01-01jquery post方式傳遞多個(gè)參數(shù)值后臺以數(shù)組的方式進(jìn)行接收
在用jquery的post方式傳遞多個(gè)值時(shí),在后臺頁面可以用數(shù)組形式接收,很不錯(cuò)吧,可以接收多個(gè)值啊,接下來介紹實(shí)現(xiàn)方法,感興趣的朋友可以了解下哦2013-01-01jquery將json轉(zhuǎn)為數(shù)據(jù)字典的實(shí)例代碼
這篇文章主要介紹了jquery將json轉(zhuǎn)為數(shù)據(jù)字典的實(shí)例代碼,非常不錯(cuò),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-10-10jQuery實(shí)現(xiàn)表格行和列的動態(tài)添加與刪除方法【測試可用】
這篇文章主要介紹了jQuery實(shí)現(xiàn)表格行和列的動態(tài)添加與刪除方法,涉及jQuery針對頁面元素的動態(tài)添加與刪除相關(guān)技巧,非常簡便實(shí)用,需要的朋友可以參考下2016-08-08jQuery實(shí)現(xiàn)異步獲取json數(shù)據(jù)的2種方式
這篇文章主要介紹了jQuery實(shí)現(xiàn)異步獲取json數(shù)據(jù)的2種方式,主要講述了$.getJSON方法與$.ajax方法,非常實(shí)用,需要的朋友可以參考下2014-08-08基于Jquery的標(biāo)簽智能驗(yàn)證實(shí)現(xiàn)代碼
一直在尋找最快捷方便的信息驗(yàn)證方法,之前自己編過JS版驗(yàn)證但要寫很多輔助代碼,經(jīng)過許多次改進(jìn),還是覺得太麻煩代碼還多,維護(hù)起太費(fèi)盡。2010-12-12jquery 簡短幾句代碼實(shí)現(xiàn)給元素動態(tài)添加及獲取提示信息
雖然是很基本的東西,但為什么很基本的方法就可以實(shí)現(xiàn)的東西有些人偏偏還要去追求復(fù)雜高深難懂的呢?這里只是交流而已2011-09-09jquery pagination插件實(shí)現(xiàn)無刷新分頁代碼
首先,我們要準(zhǔn)備的文件有jquery.js,jquery.pagination.js,pagination.css,還有一個(gè)就是經(jīng)常用的table布局的css文件。這些文件都會在后面的文件中包含。2009-10-10