public
Created

Make Drupal Superfish dropdowns touch-friendly

  • Download Gist
drupal-sf-touch.js
JavaScript
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44
// adapted from: http://snippets.webaware.com.au/snippets/make-css-drop-down-menus-work-on-touch-devices/
Drupal.behaviors.touchdevice_dropdowns = function(context) {
// see whether device supports touch events (a bit simplistic, but...)
var hasTouch = ("ontouchstart" in window);
// hook touch events for drop-down menus
if (hasTouch && document.querySelectorAll) {
var i, len, element,
dropdowns = document.querySelectorAll(".sf-menu .menuparent > a");
function menuTouch(event) {
// toggle flag for tracking open/closed state
var i, len, open = !(this.openState);
// reset flag on all links
for (i = 0, len = dropdowns.length; i < len; ++i) {
dropdowns[i].openState = false;
}
// set new flag value and toggle dropdown menu according to state
this.openState = open;
 
if (open) {
this.focus();
this.trigger('mouseover');
} else {
this.blur();
this.trigger('mouseout');
}
}
// Just disable the normal click on menu parents:
function menuClick(event) {
event.preventDefault();
}
for (i = 0, len = dropdowns.length; i < len; ++i) {
element = dropdowns[i];
element.openState = false;
element.addEventListener("touchstart", menuTouch, false);
element.addEventListener("click", menuClick, false);
}
}
}

Only lightly tested. Works for me on my iPhone. YMMV.

Thanks, this works like a charm. I forked it to work with Drupal 7: https://gist.github.com/3711024 Tested on my iPad with a Drupal 7 site.

Please sign in to comment on this gist.

Something went wrong with that request. Please try again.