Feature request: about superfish

[joeldbirch]

This has been a popular request for a long time but due to the amount of complexity a bug-free implementation would add, I've resisted it. However, I have been working on adding support for non-iOS touch devices (iOS works fine already) and the solution I have in mind seems to dovetail nicely with the click feature. So standby.

[joeldbirch]

You can now set the useClick option to true (new in v1.5.2). Just be aware that the links you click to open submenus will never be followed (unless you are navigating via the tab key). You could add a link to their submenus going to the same place, if this matters to you.

[wfyoung]

Thanks, Joel.

From: joeldbirch [mailto:[email protected]]
Sent: Wednesday, February 13, 2013 10:29 AM
To: joeldbirch/superfish
Cc: Bill Young
Subject: Re: [superfish] Feature request: (#2)

You can now set the useClick option to true (new in v1.5.2). Just be aware that the links you click to open submenus will never be followed (unless you are navigating via the tab key). You could add a link to their submenus going to the same place, if this matters to you.

—
Reply to this email directly or view it on GitHubhttps://github.com//issues/2#issuecomment-13499152.

[joeldbirch]

Sorry, I jumped the gun a bit. The useClick function is unreliable on all IE versions (7–10). Submenus often begin to open but then close almost straight away. Consider this an alpha feature for now.

[Luoti]

Sorry to comment on a closed issue, but have you considered making the menu work the way that the first click opens a submenu and the second one follows the link? For an avarage user this might be the most logical way of operating.

I have myself implemented it to a menu for mobile browsers with jQuery. First time when you click the menu, check that if the submenu is already visible. If it is not, open it and close all the other submenus. If it is, then follow the link.

Any thoughts?

[joeldbirch]

There are really two issues. One is useClick which I have interpreted to be clicking anchors to open and close associated submenus, and this is what this "issue" thread is about. The other is supporting touch devices with the behaviour you described. Maybe we should open a new issue about touch support if you would like to discuss further. I'll add my thoughts here for now, though:

Your idea is very similar to what is already in the latest versions of Superfish, but I am seeing issues with various Android browsers (pre-Chrome default browser in Android v4.x, Firefox, Opera). Often (though not always!) the problem browsers fire the list item's mouseenter event before the anchor's click event, causing the submenu to be technically open by the time click event fires. This causes the link to be followed on first tap in those browsers. I have verified this as the cause in the pre-Chrome v4.x default browser (although it works fine in Gingerbread 2.3.x due it seemingly not having mouse events, which is great), but I'm not sure it's the same cause in Firefox and Opera (but it's likely). Need to do more testing.

So, currently the two browsers Superfish works flawlessly in are Chrome for Android and the default Gingerbread browser. This covers a fair percentage of Android users, but nowhere near enough. I haven't even had access to a Windows Surface or Windows Phone, yet.

Back to the technicalities of the solution. The flag I am setting to determine if the tap should follow the link or not is less direct than your idea of "is the submenu visible". I'm interested to try your version, now.

My solution involves changing a boolean follow variable on the anchor to true upon mouseenter (for mouse navigation) and focusin (for keyboard navigation). Worked okay in the mobile browsers I tested…until I tested the browsers that fire mouseenter even though it's a touch device. I can think of reasons why they would want to do that, but it certainly complicates my solution. Maybe checking to see if the submenu .is(':visible') will improve things, somehow?

Thanks for the suggestion. Let's start a new issue (and link back to this one) if you want to talk more about this.

[joeldbirch]

This is solved in v1.5.4. Now works perfectly in all Android browsers I can get my hands on.

• All pre-Chrome default Android browsers.
• Chrome for Android
• Firefox for Android
• Opera Mobile for Android

Thanks for the inspiration, Luoti.

[Luoti]

No problem! :D Thank you very much for this feature!