Responsive mobile version submenu items is not working

This is my first post in this forum and have no idea where to put this one. However if this is not the place to post please inform me.

Please view this link www.flashybee.com/gaf/mobile and go to the “conditions” menu , when u hover over the menu one submenu appears and on clicking the submenu the user will redirect to these pages. This works fine in desktop or laptop but when the site looks through one mobile this function is not working at all. In need I will give you the index page and the style sheet. I have no idea how to fix this one.

Can anyone look into the matter.

Please help me as it is very very urgent.

Thanks

trnghosh

Can you describe exactly what you mean by “not working”?
Two potential issues I see are: Hover does not work on touch-screen, though in some OS a tap has the same effect.
If the menu item is not at the top when opened, the sub-menu goes off the bottom of a small screen.

Thanks for the quick response. This is the observation of my friend for whom I am trying to build this one.

“There is something not quite right with the menu of Conditions…You need to press twice for the child pages to appear and people will think there are no other pages if this submenu doesn’t appear the first time round. Please revise and make the submenu more accessible when pressed once the “Conditions””

Once again thanks and waiting for your response.

Thanks.

With reference to my previous post I forgot to mention that this is a “bootstrap template” and it use one js file to make the dropdown menu. As I could not upload the files I just put the js file code here for look. Please take a look

[code]
/*

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

	var sf = $.fn.superfish,
		c = sf.c,
		$arrow = $(['<span class="',c.arrowClass,'"> &rsaquo;</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');
		});
		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  : 'menu-arrow',
	shadowClass : 'sf-shadow'
};
sf.defaults = {
	hoverClass	: 'sfHover',
	pathClass	: 'overideThisToUse',
	pathLevels	: 2,
	delay		: 1000,
	animation	: {height:'show'},
	speed		: 'normal',
	autoArrows	: false,
	dropShadows : false,
	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();
		o.onHide.call($ul);
		return this;
	},
	showSuperfishUl : function(){
		var o = sf.op,
			sh = sf.c.shadowClass+'-off',
			$ul = this.not('.accorChild').addClass(o.hoverClass)
				.find('>ul:hidden');
		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);
/---------------------/
$(function(){
$(‘.menu’).superfish({autoArrows: true})
}) [/code]

The menu works ok for me on my iphone.

I only have to tap it once and the submenu opens.

There is always a slight delay on first tap but it seems to be working ok for me.

You probably should have used superclick instead of superfish as you don’t really want a hover menu for mobile anyway.

If it is a page speed problem, you might want to run your site through https://developers.google.com/speed/pagespeed/insights/ and see what suggestions that comes up with.

I got another superfish script and it seems working on mobile devices , but unable to combine with the first one to work in my template. Here is the script [code]/*

;(function ($, w) {
“use strict”;

var methods = (function () {
	// private properties and methods go here
	var c = {
			bcClass: 'sf-breadcrumb',
			menuClass: 'sf-js-enabled',
			anchorClass: 'sf-with-ul',
			menuArrowClass: 'sf-arrows'
		},
		ios = (function () {
			var ios = /^(?![\w\W]*Windows Phone)[\w\W]*(iPhone|iPad|iPod)/i.test(navigator.userAgent);
			if (ios) {
				// tap anywhere on iOS to unfocus a submenu
				$('html').css('cursor', 'pointer').on('click', $.noop);
			}
			return ios;
		})(),
		wp7 = (function () {
			var style = document.documentElement.style;
			return ('behavior' in style && 'fill' in style && /iemobile/i.test(navigator.userAgent));
		})(),
		unprefixedPointerEvents = (function () {
			return (!!w.PointerEvent);
		})(),
		toggleMenuClasses = function ($menu, o, add) {
			var classes = c.menuClass,
				method;
			if (o.cssArrows) {
				classes += ' ' + c.menuArrowClass;
			}
			method = (add) ? 'addClass' : 'removeClass';
			$menu[method](classes);
		},
		setPathToCurrent = function ($menu, o) {
			return $menu.find('li.' + o.pathClass).slice(0, o.pathLevels)
				.addClass(o.hoverClass + ' ' + c.bcClass)
					.filter(function () {
						return ($(this).children(o.popUpSelector).hide().show().length);
					}).removeClass(o.pathClass);
		},
		toggleAnchorClass = function ($li, add) {
			var method = (add) ? 'addClass' : 'removeClass';
			$li.children('a')[method](c.anchorClass);
		},
		toggleTouchAction = function ($menu) {
			var msTouchAction = $menu.css('ms-touch-action');
			var touchAction = $menu.css('touch-action');
			touchAction = touchAction || msTouchAction;
			touchAction = (touchAction === 'pan-y') ? 'auto' : 'pan-y';
			$menu.css({
				'ms-touch-action': touchAction,
				'touch-action': touchAction
			});
		},
		getMenu = function ($el) {
			return $el.closest('.' + c.menuClass);
		},
		getOptions = function ($el) {
			return getMenu($el).data('sfOptions');
		},
		over = function () {
			var $this = $(this),
				o = getOptions($this);
			clearTimeout(o.sfTimer);
			$this.siblings().superfish('hide').end().superfish('show');
		},
		close = function (o) {
			o.retainPath = ($.inArray(this[0], o.$path) > -1);
			this.superfish('hide');

			if (!this.parents('.' + o.hoverClass).length) {
				o.onIdle.call(getMenu(this));
				if (o.$path.length) {
					$.proxy(over, o.$path)();
				}
			}
		},
		out = function () {
			var $this = $(this),
				o = getOptions($this);
			if (ios) {
				$.proxy(close, $this, o)();
			}
			else {
				clearTimeout(o.sfTimer);
				o.sfTimer = setTimeout($.proxy(close, $this, o), o.delay);
			}
		},
		touchHandler = function (e) {
			var $this = $(this),
				o = getOptions($this),
				$ul = $this.siblings(e.data.popUpSelector);

			if (o.onHandleTouch.call($ul) === false) {
				return this;
			}

			if ($ul.length > 0 && $ul.is(':hidden')) {
				$this.one('click.superfish', false);
				if (e.type === 'MSPointerDown' || e.type === 'pointerdown') {
					$this.trigger('focus');
				} else {
					$.proxy(over, $this.parent('li'))();
				}
			}
		},
		applyHandlers = function ($menu, o) {
			var targets = 'li:has(' + o.popUpSelector + ')';
			if ($.fn.hoverIntent && !o.disableHI) {
				$menu.hoverIntent(over, out, targets);
			}
			else {
				$menu
					.on('mouseenter.superfish', targets, over)
					.on('mouseleave.superfish', targets, out);
			}
			var touchevent = 'MSPointerDown.superfish';
			if (unprefixedPointerEvents) {
				touchevent = 'pointerdown.superfish';
			}
			if (!ios) {
				touchevent += ' touchend.superfish';
			}
			if (wp7) {
				touchevent += ' mousedown.superfish';
			}
			$menu
				.on('focusin.superfish', 'li', over)
				.on('focusout.superfish', 'li', out)
				.on(touchevent, 'a', o, touchHandler);
		};

	return {
		// public methods
		hide: function (instant) {
			if (this.length) {
				var $this = this,
					o = getOptions($this);
				if (!o) {
					return this;
				}
				var not = (o.retainPath === true) ? o.$path : '',
					$ul = $this.find('li.' + o.hoverClass).add(this).not(not).removeClass(o.hoverClass).children(o.popUpSelector),
					speed = o.speedOut;

				if (instant) {
					$ul.show();
					speed = 0;
				}
				o.retainPath = false;

				if (o.onBeforeHide.call($ul) === false) {
					return this;
				}

				$ul.stop(true, true).animate(o.animationOut, speed, function () {
					var $this = $(this);
					o.onHide.call($this);
				});
			}
			return this;
		},
		show: function () {
			var o = getOptions(this);
			if (!o) {
				return this;
			}
			var $this = this.addClass(o.hoverClass),
				$ul = $this.children(o.popUpSelector);

			if (o.onBeforeShow.call($ul) === false) {
				return this;
			}

			$ul.stop(true, true).animate(o.animation, o.speed, function () {
				o.onShow.call($ul);
			});
			return this;
		},
		destroy: function () {
			return this.each(function () {
				var $this = $(this),
					o = $this.data('sfOptions'),
					$hasPopUp;
				if (!o) {
					return false;
				}
				$hasPopUp = $this.find(o.popUpSelector).parent('li');
				clearTimeout(o.sfTimer);
				toggleMenuClasses($this, o);
				toggleAnchorClass($hasPopUp);
				toggleTouchAction($this);
				// remove event handlers
				$this.off('.superfish').off('.hoverIntent');
				// clear animation's inline display style
				$hasPopUp.children(o.popUpSelector).attr('style', function (i, style) {
					return style.replace(/display[^;]+;?/g, '');
				});
				// reset 'current' path classes
				o.$path.removeClass(o.hoverClass + ' ' + c.bcClass).addClass(o.pathClass);
				$this.find('.' + o.hoverClass).removeClass(o.hoverClass);
				o.onDestroy.call($this);
				$this.removeData('sfOptions');
			});
		},
		init: function (op) {
			return this.each(function () {
				var $this = $(this);
				if ($this.data('sfOptions')) {
					return false;
				}
				var o = $.extend({}, $.fn.superfish.defaults, op),
					$hasPopUp = $this.find(o.popUpSelector).parent('li');
				o.$path = setPathToCurrent($this, o);

				$this.data('sfOptions', o);

				toggleMenuClasses($this, o, true);
				toggleAnchorClass($hasPopUp, true);
				toggleTouchAction($this);
				applyHandlers($this, o);

				$hasPopUp.not('.' + c.bcClass).superfish('hide', true);

				o.onInit.call(this);
			});
		}
	};
})();

$.fn.superfish = function (method, args) {
	if (methods[method]) {
		return methods[method].apply(this, Array.prototype.slice.call(arguments, 1));
	}
	else if (typeof method === 'object' || ! method) {
		return methods.init.apply(this, arguments);
	}
	else {
		return $.error('Method ' +  method + ' does not exist on jQuery.fn.superfish');
	}
};

$.fn.superfish.defaults = {
	popUpSelector: 'ul,.sf-mega', // within menu context
	hoverClass: 'sfHover',
	pathClass: 'overrideThisToUse',
	pathLevels: 1,
	delay: 800,
	animation: {opacity: 'show'},
	animationOut: {opacity: 'hide'},
	speed: 'normal',
	speedOut: 'fast',
	cssArrows: true,
	disableHI: false,
	onInit: $.noop,
	onBeforeShow: $.noop,
	onShow: $.noop,
	onBeforeHide: $.noop,
	onHide: $.noop,
	onIdle: $.noop,
	onDestroy: $.noop,
	onHandleTouch: $.noop
};

})(jQuery, window);
[/code]

If anyone can combine both of them that will be great for me.

Thanks to all of them who visiting this topic.

Thanks.

You will have to clarify what you mean and what you think is not working as it seems to be working for me on both desktop and mobile?

Note that on mobile you would be better opening the conditions submenu by default (as it is the only submenu anyway) but then collapsing the whole menu to a hamburger menu to save on screen real estate.

You also need to fix your cookie message on mobile as it can’t be dismissed.

Thanks PaulOB for the response. This is the response I got from my friend for whom I am doing this one. His remarks are here :thumbsdown:

"There is something not quite right with the menu of Conditions…You need to press twice for the child pages to appear and people will think there are no other pages if this submenu doesn’t appear the first time round. Please revise and make the submenu more accessible when pressed once the “Conditions”

He wants to keep the submenu format in mobile same as desktop :- Collapsed at the opening and expanded on click or hover.

This is the problem. Regarding the cookie message with my little knowledge I am trying to fix this one but unable to fix it for mobile devices. In need I can give you the page to look into. Once again thanks for the message.

If it is not clear then please message me and I will try again so that you can understand.

Once again many thanks for the response.

Regards

You have to realise that any hover effect will suffer from this issue and some mobiles will require a double tap to activate. Mobile users will often run into this scenario and should be familiar with it. As I said above IOS is ok and works with a single tap so I guess your client is on android or perhaps an older phone which I cannot test.

Your choices are clear (although) not simple and you either need to revert to a click menu for small screens so that the action occurs straight away (as per the superclick menu I linked to). The problem is that if you want a hover menu for desktop then it takes considerable scripting to implement both and not something that can be offered as a tip in the forums.

The better alternative, and the one that I recommend, is to use the superclick menu for both desktop and mobile which means you don’t have to do anything special for either. Hover menus are a usability nightmare and I avoid implementing them especially as tablets are as big as desktops now and are touch only (and indeed some desktops are touch and hover capable so sniffing for either is a bad choice). A click menu helps motor impaired users with shaky hands because they stay open even when the mouse is moved off them and allows a choice to be easily made. You just need to indicate the menu has a submenu by including a down arrow next to the text (the superclick menu can add these automatically).

The client doesn’t always know best and its your job to educate what works best for mobile and desktop. :slight_smile:

As I said before the fact that your menu on mobile takes up the whole screen is not very nice on mobile and you really need to collapse to the hamburger menu or reduce the number of options available if you want it open and have it in one line. Just look at any other mobile sites to get an idea of what’s required.

I’m afraid there are no easy fixes and not everything is possible or viable and compromises may have to be made along the way.

(You should also find out what device the client was using just in case it was something old fashioned and unlikely to work anyway. If he has an old or not updated device then he may be suffering from a tap delay as mentioned here which is fixed for modern devices.)

If the client still wants a hover for desktop and a click for mobile then you will need to learn the techniques needed to accomplish this or seek professional paid help. We can help if you want to learn techniques so that you can do this yourself but we are not here to do work for free as such (although we do go above the call of duty many times) :slight_smile:

I can give you the fix for the cookie message as that is simple CSS and you need to add the following css to the end of the css file.

#catapult-cookie-bar{
width:auto;
max-width:1005px;
margin:auto;
left:0;
right:0;
}

I don’t understand why your client was so concerned with the double tap which was a minor irritation compared to the cookie message which made the site unusable?

Once again thanks PaulOB for this long message describing all the ins and outs. Yes you are correct the person is really horrible but you know sometimes we could not speak the truth and just keep mum. For double tapping in the mobile he though that his user will find nothing with single click and just leave the site. However I will try to convey the thoughts you gave me to him and if he do not agree with me I have no other way just to leave the work. Thank’s for the cookie code, I was so frightened with his harsh language just forget to do this one. However thanks for this one.

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.