responsive-nav.js

$(document).ready(function() {
	$('#navtoggle').on('click', function(e){
		e.preventDefault();
		e.stopPropagation();
		$('#subnav').slideToggle(500, function() {
			if ($('#subnav').is(':visible'))
				$('#subnav').css('display','block'); /* This is needed, so it does not get confused with display: table-cell */
		});
	});
	
	$("#subnav").on("click", function (e) {
		e.stopPropagation();
    });
});

// close #subnav when clicking somewhere on the page
function closeNav(e) {
	var c = $("#navtoggle");
	if (!c.is(e.target) && c.has(e.target).length === 0) {
		if($(window).width() <= 640) {
			$("#subnav").delay(500).slideUp(300, function() {
				if ($('#subnav').is(':visible'))
					$('#subnav').css('display','block');
			});
		}
    }
};

$(document).on('mouseup', closeNav);
$(document).on('touchstart', closeNav);
$('html').click(closeNav);


// hide/show when resize window
$(window).resize(function() {
	if($(window).width() >= 640) {
		$("#subnav").slideDown(300, function() {
			if ($('#subnav').is(':visible'))
				$('#subnav').css('display','block');
		});
	}
	else {
		$("#subnav").slideUp(300, function() {
			if ($('#subnav').is(':visible'))
				$('#subnav').css('display','block');
		});
	}
});