jQuery实现可用于博客的动态滑动菜单完整实例

本文实例讲述了jQuery实现可用于博客的动态滑动菜单代码。分享给大家供大家参考。具体如下：

这是一款基于jQuery1.3.2的动态滑动菜单特效代码，常用于博客，鼠标滑过菜单，菜单会不断伸出，貌似很漂亮，我比较喜欢，发上来供大家使用或学习参考。

运行效果截图如下：

在线演示地址如下：

http://演示。JB 51。net/js/2015/jquery-blog-move-style-menu-codes/

具体代码如下：

！DOCTYPE html PUBLIC '-//W3C//DTD XHTML 1.0 Transitional//EN ' ' http://www .w3。org/TR/XHTML 1/DTD/XHTML 1-Transitional。DTD ' html xmlns=' http://www .w3。org/1999/XHTML ' lang=' EN ' XML : lang=' EN ' head title jquery滑动菜单插件/title脚本类型=' text/JavaScript ' src=' http : jquery 1。3 .2 .js '/script脚本类型=' text/JavaScript '(函数($){ $.fn.extend({ tagdrop:函数（选项){ var defaults={ tagpadding p 3360 ' 90px '，tagDefaultPaddingTop: ' 30px '，bgColor: ' # B1CCED '，bgMoverColor:var选项=$。扩展（默认值、选项);返回这个。每个(function(){ var obj=$(this)；var li_items=$('li '，obj)；美元.css('背景色'，选项。bgcolor)；李_ items。将鼠标悬停在(function(){ $(this))上.动画({ padding p :选项。标签填充TP }，300)；$(这个)。css(“”背景色，选项。bgmovercolor)；$(这个)。css('颜色'，选项。text color)；}).mouseout(函数(){ $(此)).动画化({划桨：选项。tagdefaultpaddingtop }，500)；$('li '，$(this).parent()).css('背景色'，选项。bgcolor)；$('li '，$(this).parent()).css('颜色'，选项。textdefault color)；});});} });})(jQuery)；/script脚本类型=' text/JavaScript ' $(文档)。ready(function() { $(')).菜单')。标记删除({标记填充p : ' 60px '，bgColor: '#B1CCED '，bgMoverColor: '#7FB0F0 '，text color : ' # e0e0e 0 ' })；});/script style body { margin :0；划水：0;} # nav Li { margin : 0；padd : 0；内联显示：列表样式类型：无；font-size : 12px} #nav a:link，# nav a : visited { } # nav a :悬停{ color : # fff背景# ff6a 00 } # nav a : visited . active，# nav a : link。活动{底色： # fffcolor: # FF6A00}。菜单{列表式：无；保证金： 0；右浮动：} .菜单li { float:leftmargin:0自动记录器：指针指针；高度：30 pxpadd :30 px 5px 5px 5pxmargin 33600 px 3px 0px 3px-moz-border-radius : 0px 0px 10px 10px；-web套件-边框-半径：0 px 0px 10px 10px-moz-box-shadow : 0 1px 3px rgba(0，0，0，0.5)；-web kit-box-shadow : 0 1px 3px rgba(0，0，0，0.5)；颜色： # FFF；text-shadow: 0 -1px 1px rgba(0，0，0，0.25)；font-family: 'Lucida Grande '，Lucida，Verdana，无衬线；font-size :13 px字体粗细：加粗；文本转换：大写；}/style /head body ul class='menu '关于我们/李莉联系/李莉其他/李莉产品/李莉产品组合/李莉系统/li /ul /body/html希望本文所述对大家的jQuery程序设计有所帮助。