Beat the 300ms Delay on Touch, and Close Sub-Menus
by, 08-21-2014 at 09:39 AM (25088 Views)
One of the most annoying things on touch devices is the way that CSS hover activated menus stay open until another link is clicked. Well, this example fixes that;
UPDATED! Responsive CSS3 Multi-Level, Drop-Down Menu
(Earlier releases of the Drop-Down menu have been replaced with better support for tap-activated sub-menus on touchscreen - reverted to using the arrow labels and checkbox hack [like the Fly-Out version does] - they're there for mobile view so why not use them on desktop!?! - instead of the pseudo ' \/ ' and ' > ' elements)
View it in a large screen touch device (iPad or other large tablet) and you can just click the surrounding area to close any open menus. Great stuff! "How did you do it?", I hear you ask. Well, to be honest, it was something I stumbled on while researching perceived performance on mobile (and ways to improve it).
Removing the 300ms delay
"For the most part this [FastClick] worked really well, but we eventually began to find that the util sometimes exhibited strange behaviour, such as events not firing when links were clicked and then firing later on, at the same time as other click events when different elements were clicked."
Well, at a 5th of the script size, (5kb instead of 25kb non-minified), I thought I'd give SwiftClick a whirl. I downloaded the minified code, dropped it into the bottom of my page (this demo), and then initialised it, as directed, on the document body;By default, the SwiftClick script only targets common clickable elements (a, div, span, button), which is what makes it smaller than FastClick, but I want it to work on my menu's arrow labels too. With SwiftClick you can add more elements;Code:var swiftclick = SwiftClick.attach(document.body);If you try the demo on a touch device, and compare it to the earlier version without SwiftClick you will see that the sub-menus activate in ultra-quick time, AND the drop-downs in desktop view close again without obscuring content! Oh, happy day, and big kisses to the SwiftClick team!Code:swiftclick.addNodeNamesToTrack (["label"]);
Don't have a large screen touch device? You can test it on a small screen touch device too. Just copy the source code into a web page of your own, but remove this line;then upload it to your own web host/server and view there. The absence of that meta tag makes the desktop drop-down view visible on smaller screens.Code:<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1" />
Coincidentally, I tried SwiftClick on my Responsive Multi-Level, Fly-Out Menu and it works splendidly on that too!