Jump to content

How to Get Rid of the Blinking on The Superfish Navigation Plugin?


Recommended Posts

I've implemented a jQuery navigation with sub menus into my Wordpress theme. And so far it's working fine the only problem I have with it is that there is a blinking effect as soon as you hover over the menu items and I have no clue where it comes from or why this blinking is there to begin with.

 

You can see a demonstration of it on my blog here. (Simply hover over the navi item CONTACT).

 

I've used the jQuery plugin Superfish for the navigation, if some of you may not know it here is the code for the plugin:

 

I'd appreciate suggestions where the blinking stems from, so I can get rid of it.

 

Thanks

 

 



/*
* Superfish v1.4.8 - jQuery menu widget
* Copyright (c) 2008 Joel Birch
*
* Dual licensed under the MIT and GPL licenses:
* 	http://www.opensource.org/licenses/mit-license.php
* 	http://www.gnu.org/licenses/gpl.html
*
* CHANGELOG: http://users.tpg.com.au/j_birch/plugins/superfish/changelog.txt
*/

// »

;(function($){
$.fn.superfish = function(op){

	var sf = $.fn.superfish,
		c = sf.c,
		$arrow = $(['<span class="',c.arrowClass,'"></span>'].join('')),
		over = function(){
			var $$ = $(this), menu = getMenu($$);
			clearTimeout(menu.sfTimer);
			$$.showSuperfishUl().siblings().hideSuperfishUl();
		},
		out = function(){
			var $$ = $(this), menu = getMenu($$), o = sf.op;
			clearTimeout(menu.sfTimer);
			menu.sfTimer=setTimeout(function(){
				o.retainPath=($.inArray($$[0],o.$path)>-1);
				$$.hideSuperfishUl();
				if (o.$path.length && $$.parents(['li.',o.hoverClass].join('')).length<1){over.call(o.$path);}
			},o.delay);	
		},
		getMenu = function($menu){
			var menu = $menu.parents(['ul.',c.menuClass,':first'].join(''))[0];
			sf.op = sf.o[menu.serial];
			return menu;
		},
		addArrow = function($a){ $a.addClass(c.anchorClass).append($arrow.clone()); };

	return this.each(function() {
		var s = this.serial = sf.o.length;
		var o = $.extend({},sf.defaults,op);
		o.$path = $('li.'+o.pathClass,this).slice(0,o.pathLevels).each(function(){
			$(this).addClass([o.hoverClass,c.bcClass].join(' '))
				.filter('li:has(ul)').removeClass(o.pathClass);
		});
		sf.o[s] = sf.op = o;

		$('li:has(ul)',this)[($.fn.hoverIntent && !o.disableHI) ? 'hoverIntent' : 'hover'](over,out).each(function() {
			if (o.autoArrows) addArrow( $('>a:first-child',this) );
		})
		.not('.'+c.bcClass)
			.hideSuperfishUl();

		var $a = $('a',this);
		$a.each(function(i){
			var $li = $a.eq(i).parents('li');
			$a.eq(i).focus(function(){over.call($li);}).blur(function(){out.call($li);});
		});
		o.onInit.call(this);

	}).each(function() {
		var menuClasses = [c.menuClass];
		if (sf.op.dropShadows  && !($.browser.msie && $.browser.version < 7)) menuClasses.push(c.shadowClass);
		$(this).addClass(menuClasses.join(' '));
	});
};

var sf = $.fn.superfish;
sf.o = [];
sf.op = {};
sf.IE7fix = function(){
	var o = sf.op;
	if ($.browser.msie && $.browser.version > 6 && o.dropShadows && o.animation.opacity!=undefined)
		this.toggleClass(sf.c.shadowClass+'-off');
	};
sf.c = {
	bcClass     : 'sf-breadcrumb',
	menuClass   : 'sf-js-enabled',
	anchorClass : 'sf-with-ul',
	arrowClass  : 'sf-sub-indicator',
	shadowClass : 'sf-shadow'
};
sf.defaults = {
	hoverClass	: 'sfHover',
	pathClass	: 'overideThisToUse',
	pathLevels	: 1,
	delay		: 800,
	animation	: {opacity:'show'},
	speed		: 'normal',
	autoArrows	: true,
	dropShadows : true,
	disableHI	: false,		// true disables hoverIntent detection
	onInit		: function(){}, // callback functions
	onBeforeShow: function(){},
	onShow		: function(){},
	onHide		: function(){}
};
$.fn.extend({
	hideSuperfishUl : function(){
		var o = sf.op,
			not = (o.retainPath===true) ? o.$path : '';
		o.retainPath = false;
		var $ul = $(['li.',o.hoverClass].join(''),this).add(this).not(not).removeClass(o.hoverClass)
				.find('>ul').hide().css('visibility','hidden');
		o.onHide.call($ul);
		return this;
	},
	showSuperfishUl : function(){
		var o = sf.op,
			sh = sf.c.shadowClass+'-off',
			$ul = this.addClass(o.hoverClass)
				.find('>ul:hidden').css('visibility','visible');
		sf.IE7fix.call($ul);
		o.onBeforeShow.call($ul);
		$ul.animate(o.animation,o.speed,function(){ sf.IE7fix.call($ul); o.onShow.call($ul); });
		return this;
	}
});

})(jQuery);

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.