Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Make Drupal Superfish dropdowns touch-friendly (for Drupal 7)
// adapted from: http://snippets.webaware.com.au/snippets/make-css-drop-down-menus-work-on-touch-devices/
// forked from https://gist.github.com/3351233
(function ($) {
//add new drupal 7 code
Drupal.behaviors.touchdevice_dropdowns = {
attach:function (context, settings) {
//end drupal calls
// 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);
}
}
}}})
(jQuery);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment