Make Drupal Superfish dropdowns touch-friendly

drupal-sf-touch.js

// 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.