Last active
December 31, 2015 16:09
-
-
Save joeyfigaro/8011654 to your computer and use it in GitHub Desktop.
Detect intent on dropdown menus for iPads. One tap shows the menu, two direct taps navigates.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// Set onclick to 'main' to make it clickable in iOS | |
// Docs: http://goo.gl/dshL9a | |
var main = document.getElementsByTagName('main')[0]; | |
main.addEventListener('click', function() { | |
void(0); | |
}); | |
// iPad dropdowns | |
// use intent to determine whether a user wants to navigate to the page or show menu | |
(function() { | |
var targets = [], | |
menus = $('.navigation .wrapper > ul:first-child > li > a + ul'); | |
links = $('.navigation .wrapper > ul:first-child > li > a'); | |
$(links).each(function(e) { | |
// Set up our objects | |
var target = { | |
key: $.trim($(this)[0].outerText), | |
count: 0 | |
} | |
// ...and add them to our targets array | |
targets.push(target); | |
// Watch for touch events | |
$(this).bind('touchstart', function(e) { | |
var id = $.trim(e.currentTarget.outerText), | |
target_menu = $(this).find('+ ul'); | |
// Hide any menus currently visible | |
$(menus).hide(); | |
// Loop over our target objects for | |
// required functions (show, hide, reset, count) | |
for(i = 0; i < targets.length; i++) { | |
// Reset count on other links that have been touched | |
if(id != targets[i].key && targets[i].count > 0) { | |
targets[i].count = 0; | |
} | |
// Set count for current target and display menu | |
if(id == targets[i].key && targets[i].count < 1) { | |
targets[i].count++; | |
e.preventDefault(); | |
$(target_menu).show(); | |
} | |
if(id == targets[i].key && targets[i].count > 1) { | |
// Navigate to selected page | |
} | |
} | |
}); | |
}); | |
// Clear any open menus when click/tap is detected in an irrelevant area | |
window.onclick = function() { | |
$(menus).hide(); | |
// Reset count on any menu targets that have been touched | |
for(x = 0; x < targets.length; x++) { | |
if(targets[x].count > 0) { | |
targets[x].count = 0; | |
} | |
} | |
}; | |
})(); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment