Skip to content

Instantly share code, notes, and snippets.

What would you like to do?
Make Drupal Superfish dropdowns touch-friendly
// adapted from:
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) {
} else {
// Just disable the normal click on menu parents:
function menuClick(event) {
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);

This comment has been minimized.

Copy link
Owner Author

@dougalcampbell dougalcampbell commented Aug 14, 2012

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


This comment has been minimized.

Copy link

@danny-englander danny-englander commented Sep 14, 2012

Thanks, this works like a charm. I forked it to work with Drupal 7: 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