您的当前位置：首页 jQuery实现可用于博客的动态滑动菜单完整实例_jquery

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

来源：纷纭教育

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

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

运行效果截图如下：

在线演示地址如下：

http://demo.jb51.net/js/2015/jquery-blog-move-style-menu-codes/

具体代码如下：




jQuery滑动菜单插件


 (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);

希望本文所述对大家的jQuery程序设计有所帮助。