Canvas Support

generel Problem - Mobile Menu / Desktop Menu - hover click action

6 replies · opened Apr 26, 2020

SstookyApr 26, 2020

hello semicolon

I have a general problem width moilde menus vs desktop menus and the actions hover and click.

on desktop we have a mouse and a hover function.
hovering a menu item expands its subs / childs.

on mobiles there is no hover function.
there fore click opens its subs / childs.

I am using your templates to integrate them in CMS.
most of the like e.g. TYPO3 act in general, clicking a menu item opens the related page.

ok that works with your menus fine on desktop.
but not on mobiles, as on on mobiles a click only opens the page if there are no subs / childs. as described above if there are subs / childs to a menu item, that the menu is expanded but not the page shown.

this is a hugh problem on all websites I create with CMSytems.

as there is no hover on moblies just click, I would suggest a different method of handling the the menus on mobiles.
on mobiles we have the menut-item name and on the right side the arrow, indicating there is subs.
so IMHO the best solution would be to alter the functionality of mobile menus.

if there is no subs / childs no arrow on the right and clicking the item opens its page.
but if there is subs / childs, the the menu item should have double functionality.
clicking on the menu item name, should directly open the page and show it's content.
clicking on the arrow should fold down and show the subs / childs.

otherwise I always need to have an additional page as first child and make the parent a shortcut to first child, so when on desktop clicking the parent it will open the first child. when on mobile clicking the parent it will fold down the childs and ths click on first child shows the content that normally belongs to parent.

this leads to longer urls and often a wording problem.

I hope I have described well what my issue is, and am desperately hoping you can provide a solution for this.

if you need samples, I will post them with acces credentials in a private post, as the actual website is still on dev.

thx rgds,
guido

SstookyApr 26, 2020

here the sample to see what I exactly mean.

http://bs1.web.my1.cc/
htacces:
bs1-landshut
typo3_2020

on this website please check it first on desktop with mouse
in header menu third menu item is called "Abteilungen"
hovering it with the mouse unfolds the dropdown
clicking abteilungen shows the page http://bs1.web.my1.cc/abteilungen.html

on mobile I have no option to reach this page, as there is no hovering, and when clicking "Abteilungen" it does not open the page but unfolds the childs.

here I would love to have an option to

  • click on mobile the item name and it opens the page
  • click on mobile the arrow right and it unfolds the subs / childs

otherwise as described in the intital post I need to make for desktop a redirect from "Abteilungen" to a first child "Overview" for example.
so clicking on desktop on "Abteilungen" will open the first child "Overview".

but that would result in an url
http://bs1.web.my1.cc/abteilungen/overview.html
and for SEO puposes
http://bs1.web.my1.cc/abteilungen.html would be shorter and better for the ranking.

hope you understand my issue and have a handy solution for me and for sure for many others.

thx rgds,
guido

SSemicolon WebSTAFFApr 26, 2020

Hello,

Hope you are doing well! :)

This solution has already been discussed on the Forums for a long time and we have already provided with an Alternate Solution. With the Latest Updates of Canvas v5.9, Superfish Menu was disabled on Mobile Devices and replaced with the OnClick Mobile Menus which shows/hides the Sub-Menus on clicking the Parent Menu items. However, the Parent Menu Items are then disabled, which we definitely understand is not an ideal user experience. We have been working on this and have come up with a Solution to introduce a Sub Menu Trigger. Please consider following the Steps below:

  1. Add this CSS Code:
#primary-menu i.sub-menu-trigger { display: none; }

@media (max-width: 991.98px) {
	#primary-menu i.sub-menu-trigger {
		display: block;
		position: absolute;
		top: 9px;
		left: auto;
		right: 0;
		width: 32px;
		height: 32px;
		line-height: 32px;
		font-size: 16px;
		text-align: center;
		background-color: #FFF;
		border: 1px solid #EEE;
		border-radius: 50%;
		cursor: pointer;
		z-index: 2;
	}

	#primary-menu ul ul i.sub-menu-trigger { top: 6px; }
}
  1. Replace the entire menufunctions: function() Function Block in the js/functions.js File with the following code:
menufunctions: function(){

	$( '#primary-menu ul li:has(ul)' ).addClass('sub-menu');
	$( '#primary-menu ul li:has(ul):not(.mega-menu-column,.mega-menu-title)' ).append('');
	$( '.top-links ul li:has(ul) > a, #primary-menu.with-arrows > ul > li:has(ul) > a > div, #primary-menu.with-arrows > div > ul > li:has(ul) > a > div, #page-menu nav ul li:has(ul) > a > div' ).not(':has(.icon-angle-down)').append( '' );
	$( '.top-links > ul' ).addClass( 'clearfix' );

	if( $body.hasClass('device-xl') || $body.hasClass('device-lg') ) {
		$('#primary-menu.sub-title > ul > li').hover(function() {
			$(this).prev().css({ backgroundImage : 'none' });
		}, function() {
			$(this).prev().css({ backgroundImage : 'url("images/icons/menu-divider.png")' });
		});

		$('#primary-menu.sub-title').children('ul').children('.current').prev().css({ backgroundImage : 'none' });
	}

	if( $('#primary-menu').hasClass('on-click') || ( $body.hasClass('device-md') || $body.hasClass('device-sm') || $body.hasClass('device-xs') ) ) {
		$('#primary-menu:not(.on-click) > ul, #primary-menu:not(.on-click) > div > ul:not(.dropdown-menu)').superfish('destroy');
		$('#primary-menu li:has(ul) i.sub-menu-trigger').on( 'click touchend', function(e){
			$(this).parents('.sub-menu').siblings().find('ul,.mega-menu-content').removeClass('d-block');
			$(this).parent('li').children('ul,.mega-menu-content').toggleClass('d-block');
			if( $(this).hasClass('icon-angle-down') ) {
				$(this).removeClass('icon-angle-down').addClass('icon-angle-up');
			} else {
				$(this).removeClass('icon-angle-up').addClass('icon-angle-down');
			}
			var megaMenuContent = $(this).parent('li').children('.mega-menu-content');
			setTimeout( function(){
				if( megaMenuContent.find('.owl-carousel.customjs').length > 0 ) {
					megaMenuContent.find('.owl-carousel').removeClass('customjs');
					SEMICOLON.widget.carousel();
				}
				if( megaMenuContent.find('.grid-container').length > 0 ) {
					megaMenuContent.find('.grid-container').isotope('layout');
				}
			}, 400);
			e.preventDefault();
		});
	}

	if( $('.top-links').hasClass('on-click') || ( $body.hasClass('device-md') || $body.hasClass('device-sm') || $body.hasClass('device-xs') ) ) {
		$('.top-links:not(.on-click) > ul').superfish('destroy');
		$('.top-links li:has(ul,.top-link-section) > a').on( 'click touchend', function(e){
			$(this).parents('li').siblings().find('ul,.top-link-section').removeClass('d-block');
			$(this).parent('li').children('ul,.top-link-section').toggleClass('d-block');
			e.preventDefault();
		});
	}

},

This will definitely work fine. Hope this Helps!

Let us know if we can help you with anything else or if you find any further issues.

SstookyApr 26, 2020

you guys are awesome ... AND quick ;-)

I will it try these days and report the outcome.

time beeing please stay healthy in these horrible times!!!

rgds,
guido

SSemicolon WebSTAFFApr 26, 2020

Hello,

Very Happy to Help! :)

We are trying to improve Our Support Times taking full advantage of the Quarantine! :)

Please Stay Safe.

And do let us know if we can help you with any further issues.

SstookyApr 29, 2020

hello semicolon

sorry for the delay, had some other tasks first on that project.

today I implemented your code and it works like a charm !!!

thx for the quick and perfect solution.
stay healthy!

rgds,
guido

SSemicolon WebSTAFFApr 30, 2020

Hello,

Thats Awesome! Really Glad that your issues were resolved. Very happy to Help!

Do let us know if we can help you with anything else or if you find any further issues with Canvas.

Stay Safe and Healthy. :)

Have the same question, or something new?

Sign in to the Canvas dashboard to reply or open your own topic. Canvas owners get direct help from the SemiColonWeb team.

Reply on the dashboard