Skip to content

Embed URL

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Make Drupal Superfish dropdowns touch-friendly
// 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);
}
}
}
@dougalcampbell

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

@danny-englander

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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Something went wrong with that request. Please try again.