jimjeffers · August 22, 2012 23:00
diff --git a/touchEventDropDown.html b/touchEventDropDown.html
 <!DOCTYPE html>
 <html>
 <head>
 	<style type="text/css" media="screen">
 	.pressed {
 		background: #f00;
 	}
 	
 	.js-dropDown {
 		display: none;
 	}
 	
 	.js-menuActive .js-dropDown {
 		display:block;
 	}
 	</style>
 </head>
 <body>
 	<nav>
 		<ul>
 			<li>
 				<a href="#" class="js-button">Touch for A Drop Down</a>
 				<ul class="js-dropDown">
 					<li><a href="#">Option 1</a></li>
 					<li><a href="#">Option 2</a></li>
 					<li><a href="#">Option 3</a></li>
 					<li><a href="#">Option 4</a></li>
 				</ul>
 			</li>
 		</ul>
 	</nav>
 	
 	<script src="/path/to/jquery.js" type="text/javascript" charset="utf-8"></script>
 	<script type="text/javascript" charset="utf-8">
 	$(document).ready(function(){
 		var buttons = $(".js-button");
 		
 		// You can use Modernizr.js to test for Modernizr.touch()
 		// if you'd like to wrap this in an if statement and use
 		// hover events for non-touch enabled devices.
 		
 		// Prevent clicks.
 		buttons.click(function(){ return false; });
 		
 		// Handle touches.
 		buttons.each(function(index,button){
 			// Add pressed class when the user begins touching a button.
 			button.addEventListener("touchstart", function(event){ 
 				var $button = $(event.currentTarget);
 				$button.addClass("pressed");
 				return false;
 			});
 			
 			// Remove pressed class when user releases button.
 			// We'll also toggle the menu on or off once the button
 			// was released.
 			button.addEventListener("touchend", function(event){ 
 				var $button = $(event.currentTarget);
 				$button.removeClass("pressed");
 				$button.parent().toggleClass("js-menuActive");
 				return false;
 			});
 		});
 	});
 	</script>
 </body>
 </html>
	<!DOCTYPE html>
	<html>
	<head>
	<style type="text/css" media="screen">
	.pressed {
	background: #f00;
	}

	.js-dropDown {
	display: none;
	}

	.js-menuActive .js-dropDown {
	display:block;
	}
	</style>
	</head>
	<body>
	<nav>
	<ul>
	<li>
	<a href="#" class="js-button">Touch for A Drop Down</a>
	<ul class="js-dropDown">
	<li><a href="#">Option 1</a></li>
	<li><a href="#">Option 2</a></li>
	<li><a href="#">Option 3</a></li>
	<li><a href="#">Option 4</a></li>
	</ul>
	</li>
	</ul>
	</nav>

	<script src="/path/to/jquery.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript" charset="utf-8">
	$(document).ready(function(){
	var buttons = $(".js-button");

	// You can use Modernizr.js to test for Modernizr.touch()
	// if you'd like to wrap this in an if statement and use
	// hover events for non-touch enabled devices.

	// Prevent clicks.
	buttons.click(function(){ return false; });

	// Handle touches.
	buttons.each(function(index,button){
	// Add pressed class when the user begins touching a button.
	button.addEventListener("touchstart", function(event){
	var $button = $(event.currentTarget);
	$button.addClass("pressed");
	return false;
	});

	// Remove pressed class when user releases button.
	// We'll also toggle the menu on or off once the button
	// was released.
	button.addEventListener("touchend", function(event){
	var $button = $(event.currentTarget);
	$button.removeClass("pressed");
	$button.parent().toggleClass("js-menuActive");
	return false;
	});
	});
	});
	</script>
	</body>
	</html>