Mobile Menu: Top Level Menu Items as links

[sascha]

Hi there,
I just used the plugin for the first time and it works quite well. Thank you for sharing this!

There are 2 things though I find confusing (on mobile view!), but maybe they work like that for a reason.

1. Top level links

When you tap the top level link the menu opens. When you tap it again the link is being followed. Is there a reason for this behaviour?

I expected either of those:

a) tap the top level -> link is followed straight away (only the plus/minus sign is used for opening and closing the menu)

b) When I saw the menu open on tapping the top level link, I assumed tapping it again would close it. It was confusing that it suddenly followed the link.

Would it be wise to create an option in the plugin to allow following the top level link straight away (or is there an easy way to accomplish this)? Basically option a) above…

2. Sub-Menu Links

Those are followed straight away, but you still see the menu closing. I find this unnecessary and a bit annoying as I always think there is something happening still on the site. Is there a possibility to switch that behaviour off? Basically stopping any animation when a link is being followed…

[admin]

Hi,

1) There are a number of different ways it could work and it’s really a matter of personal preference. The main reason to have it expand the sub menu on first tap by default is that otherwise most mobile end users would not ever expand the sub menus and see the sub pages options – they would just keep tapping and loading the main links. And not using the whole menu item just as sub menu toggle allows setting actual links that could be followed by the users on second tap – even if they expect the sub menu to get hidden on second tap instead of the parent link loaded, they would learn what to expect on the next page (hopefully :)). So, yeah, I mean all diifferent behaviors have their pros and cons.

But anyway, this could be tweaked via the API.

For a), use this additional code:

http://www.smartmenus.org/forums/topic/href-not-working-on-parent-as-expected/#post-3025

If you would like b), you could use this:

http://www.smartmenus.org/forums/topic/hide-submenu-of-clicked-menu-item-only/#post-2714

For 2) you could try using the hideOnClick: false option.

[sascha]

Many thanks for the reply. That really helps!

While I was thinking about this and using a tablet (do not often do this), I had another tought. Would it be possible to totally disable the top menu links and just have them open and close the sub-menus? Then I would copy the top level link with jQuery to the top position into the sub-menu and call it “Overview” and maybe even highlight it a bit with CSS.

I felt this the least confusing option for users on touch devices. The top-level items always just toggle. Not sure how to differentiate it towards desktop usage of the menu though…

[sascha]

Maybe related:

http://www.smartmenus.org/forums/topic/top-level-menu-item-showshides-sub-menu-on-click/#post-3237

[admin]

To make the parent items just a toggle for the sub menus onclick (in collapsible and in desktop mode) just use the code from 1 b) above and disable the collapsible check – i.e.:

$(function() {
	// use the whole parent item as sub menu toggle button
	$('#main-menu').bind('click.smapi', function(e, item) {
		var obj = $(this).data('smartmenus');
		// if (obj.isCollapsible()) {
			var $sub = $(item).dataSM('sub');
			if ($sub && $sub.is(':visible')) {
				obj.menuHide($sub);
				return false;
			}
		// }
	});
});;

[Author]

Posts