If this is your first visit, be sure to
check out the FAQ by clicking the
link above. You may have to register
before you can post: click the register link above to proceed. To start viewing messages,
select the forum that you want to visit from the selection below.

(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)

This responsive menu uses JavaScript to beat the 300ms delay on touch devices, close dropped-down sub-menus on touchscreen with a tap anywhere in the surrounding area, and close all the menus/sub-menus in one go in mobile view.

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
The first point in the article mentions a JavaScript function called FastClick by FT Labs, which removes that 300ms delay from web buttons/links. This sounded brilliant, so I downloaded it and started playing around. Unfortunately, I noticed some strange behaviour on my CSS menus, where FastClick caused sub-menus to momentarily vanish after activation, and then reappear, or worse still, it caused the wrong drop-down to open! Huh? It was all very perplexing. Now, I'm not saying that there's anything wrong with FastClick - far from it - my problems probably have more to do with the way I implemented it. But still, these issues prompted me to seek out a fix, which is how I came across an alternative to FastClick called SwiftClick. In their Faster Tapping with SwiftClick article, the author mentions the same problems that I'd noticed too;

"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;

Code:

var swiftclick = SwiftClick.attach(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:

swiftclick.addNodeNamesToTrack (["label"]);

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!

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;

Comments

Hi Beverleyh,
Just a quick thing I noticed when I resized http://fofwebdesign.co.uk/freebies_f...swiftclick.htm from fullscreen to a size where the mobile-icon appears. If after a click on the icon I return directly to fullscreen mode, part of the horizontal menu is cut off / becomes invisible.