Bug Tracker

Opened 8 years ago

Closed 8 years ago

Last modified 7 years ago

#7789 closed bug (invalid)

jquery three level menu

Reported by: arjun_b Owned by:
Priority: undecided Milestone: 1.6
Component: unfiled Version: 1.4.4
Keywords: Cc:
Blocked by: Blocking:

Description (last modified by jitter)

Hi All,

I'm writing a three level menu using jquery, in which the first level is the parent and is in horizontal and the same with the secondary level and the third level is the vertical drop down menu. The issue is when we move the pointer from the first level to the second level the text-color is changing and not showing that it is the a parent menu for the correspondng child menu as per my knowledge this is a dynamic issue and should be changed in the the script part can any one hwlp me in this regard here is the code for that.

(function($){
	$.fn.superfish = function(op){
		var sf = $.fn.superfish,
			c = sf.c,
			$arrow = $(['<span class="',c.arrowClass,'"> &#187;</span>'].join('')),
			over = function(){
				var $$ = $(this), menu = getMenu($$);
				clearTimeout(menu.sfTimer);
				$$.showSuperfishUl().siblings().hideSuperfishUl();
			},
			out = function(){
				var $$ = $(this), menu = getMenu($$), o = sf.op;
				var $li;
				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');
				var $ul = $a.eq(i).parents('ul');
				$a.eq(i).focus(function(){over.call($li);}).blur(function(){out.call($li); //out.css('color','#d4001a');
		 });
							 });
			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		: 1000,
		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(){},
		mouseleave	: 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);

Change History (2)

comment:1 Changed 8 years ago by arjun_b

Hi All,

I'm writing a three level menu using jquery, in which the first level is the parent and is in horizontal and the same with the secondary level and the third level is the vertical drop down menu. The issue is when we move the pointer from the first level to the second level the text-color is changing and not showing that it is the a parent menu for the corresponding child menu as per my knowledge this is a dynamic issue and should be changed in the the script part can any one help me in this regard here is the code for that.

Thanks in advance

comment:2 Changed 8 years ago by jitter

Description: modified (diff)
Resolution: invalid
Status: newclosed

The jQuery bug tracker is not for support requests, you should only report bugs in jQuery core here. Please use the jQuery Forum for support requests. If you think this is a problem with the plugin you are using please contact the author of that plugin.

btw.: Why did you post the code of the plugin you are using but removed the licensing information?

Note: See TracTickets for help on using tickets.