Skip to main content

Bug Tracker

Side navigation

#7789 closed bug (invalid)

Opened December 16, 2010 06:21AM UTC

Closed December 16, 2010 11:14AM UTC

Last modified March 14, 2012 02:24AM UTC

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

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,'"> »</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);
Attachments (0)
Change History (2)

Changed December 16, 2010 06:38AM UTC by arjun_b comment:1

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

Changed December 16, 2010 11:14AM UTC by jitter comment:2

description: 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);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); \ }}}
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?