Create a gist now

Instantly share code, notes, and snippets.

What would you like to do?
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

This comment has been minimized.

Show comment Hide comment
@dougalcampbell

dougalcampbell Aug 14, 2012

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

Owner

dougalcampbell commented Aug 14, 2012

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

@danny-englander

This comment has been minimized.

Show comment Hide comment
@danny-englander

danny-englander Sep 14, 2012

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.

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