jQuery實(shí)現(xiàn)可用于博客的動(dòng)態(tài)滑動(dòng)菜單完整實(shí)例
本文實(shí)例講述了jQuery實(shí)現(xiàn)可用于博客的動(dòng)態(tài)滑動(dòng)菜單代碼。分享給大家供大家參考。具體如下:
這是一款基于jQuery1.3.2的動(dòng)態(tài)滑動(dòng)菜單特效代碼,常用于博客,鼠標(biāo)滑過(guò)菜單,菜單會(huì)不斷伸出,貌似很漂亮,我比較喜歡,發(fā)上來(lái)供大家使用或?qū)W習(xí)參考。
運(yùn)行效果截圖如下:
在線演示地址如下:
http://demo.jb51.net/js/2015/jquery-blog-move-style-menu-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" lang="en" xml:lang="en"> <head> <title>jQuery滑動(dòng)菜單插件</title> <script type="text/javascript" src="jquery1.3.2.js"></script> <script type="text/javascript"> (function($){ $.fn.extend({ tagdrop: function(options) { var defaults = { tagPaddingTop: '90px', tagDefaultPaddingTop: '30px', bgColor: '#B1CCED', bgMoverColor: '#7FB0F0', textColor: '#e0e0e0', textDefaultColor: '#fff' }; var options = $.extend(defaults, options); return this.each(function() { var obj = $(this); var li_items = $("li", obj); $("li", obj).css('background-color', options.bgColor); li_items.mouseover(function(){ $(this).animate({paddingTop: options.tagPaddingTop}, 300); $(this).css('background-color', options.bgMoverColor); $(this).css('color', options.textColor); }).mouseout(function() { $(this).animate({paddingTop: options.tagDefaultPaddingTop}, 500); $("li",$(this).parent()).css('background-color', options.bgColor); $("li",$(this).parent()).css('color', options.textDefaultColor); }); }); } }); })(jQuery); </script> <script type="text/javascript"> $(document).ready(function() { $('.menu').tagdrop({tagPaddingTop: '60px',bgColor: '#B1CCED',bgMoverColor: '#7FB0F0',textColor: '#e0e0e0'}); }); </script> <style> body { margin:0; padding:0; } #nav li {margin: 0; padding: 0;display: inline;list-style-type: none;font-size: 12px;} #nav a:link, #nav a:visited { } #nav a:hover {color: #fff; background:#FF6A00;} #nav a:visited.active, #nav a:link.active {background-color: #fff;color: #FF6A00;} .menu { list-style:none; margin: 0; float:right; } .menu li { float:left; margin:0 auto; cursor:pointer; height:30px; padding:30px 5px 5px 5px; margin:0px 3px 0px 3px; -moz-border-radius: 0px 0px 10px 10px; -webkit-border-radius:0px 0px 10px 10px; -moz-box-shadow: 0 1px 3px rgba(0,0,0,0.5); -webkit-box-shadow: 0 1px 3px rgba(0,0,0,0.5); color: #FFF; text-shadow: 0 -1px 1px rgba(0,0,0,0.25); font-family: "Lucida Grande",Lucida,Verdana,sans-serif; font-size:13px; font-weight:bold; text-transform:uppercase; } </style> </head> <body> <ul class="menu"> <li>About us</li> <li>Contacts</li> <li>Others</li> <li>Products</li> <li>Portfolio</li> <li>Testemonies</li> </ul> </body> </html>
希望本文所述對(duì)大家的jQuery程序設(shè)計(jì)有所幫助。
相關(guān)文章
基于jQuery制作小圖標(biāo)上下滑動(dòng)特效
一個(gè)小圖標(biāo)特效,非常有趣的,下面給大家分享基于jquery制作的小圖標(biāo)上下滑動(dòng)特效,代碼簡(jiǎn)單易懂,需要的朋友參考下2017-01-01jQuery中彈出iframe內(nèi)嵌頁(yè)面元素到父頁(yè)面并全屏化的實(shí)例代碼
這篇文章主要介紹了jQuery中彈出iframe內(nèi)嵌頁(yè)面元素到父頁(yè)面并全屏化的實(shí)例代碼,需要的朋友可以參考下2016-12-12jQuery實(shí)現(xiàn)打開(kāi)頁(yè)面漸現(xiàn)效果示例
這篇文章主要介紹了jQuery實(shí)現(xiàn)打開(kāi)頁(yè)面漸現(xiàn)效果的方法,結(jié)合實(shí)例形式分析了jQuery樣式操作及頁(yè)面元素的漸變效果實(shí)現(xiàn)技巧,需要的朋友可以參考下2016-07-07基于pthread_create,readlink,getpid等函數(shù)的學(xué)習(xí)與總結(jié)
以下是對(duì)pthread_create,readlink,getpid等函數(shù)的用法進(jìn)行了詳細(xì)的分析介紹,需要的朋友可以參考下2013-07-07jQuery簡(jiǎn)單實(shí)現(xiàn)圖片預(yù)加載
我們?cè)谧鼍W(wǎng)站的時(shí)候經(jīng)常會(huì)遇到這樣的問(wèn)題:一個(gè)頁(yè)面有大量的圖片導(dǎo)致頁(yè)面加載速度緩慢,經(jīng)常會(huì)出現(xiàn)一個(gè)白頁(yè)用戶(hù)體驗(yàn)很不好。那么如何解決這個(gè)問(wèn)題呢?下面我來(lái)介紹一種在實(shí)際應(yīng)用中經(jīng)常會(huì)使用到的js預(yù)加載的方法。2015-04-04jQuery實(shí)現(xiàn)給頁(yè)面換膚的方法
這篇文章主要介紹了jQuery實(shí)現(xiàn)給頁(yè)面換膚的方法,涉及jQuery頁(yè)面元素的選擇與樣式的操作,需要的朋友可以參考下2015-05-05JQuery跨Iframe選擇實(shí)現(xiàn)代碼
JQuery跨Iframe選擇實(shí)現(xiàn),下面也通過(guò)用DOM方法與jquery方法結(jié)合的方式實(shí)現(xiàn)了,需要的朋友可以參考下。2010-08-08Jquery實(shí)時(shí)監(jiān)聽(tīng)input value的實(shí)例
下面小編就為大家?guī)?lái)一篇Jquery實(shí)時(shí)監(jiān)聽(tīng)input value的實(shí)例。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-01-01