anythinggraphic/css-jquery-responsive-mobile-navigation-menu.css

## css-jquery-responsive-mobile-navigation-menu.css
.responsive-nav-icon::before,
.responsive-nav-close::before {
    color: #93a748;
    content: "\f0c9";
    font-family: FontAwesome;
    font-size: 22px;
    position: relative;
}

.responsive-nav-close::before {
    color: #93a748;
    content: "\f00d";
    font-size: 18px;
}

.responsive-nav-icon {
	background: #fff;
	line-height: normal;
	padding: 5px 8px 4px;
	top: 5%; left: 5%;
}

.responsive-nav-icon:hover,
.responsive-nav-close:hover {
	opacity: .7;
}

.responsive-nav-close {
	top: 10px; right: 10px;
}

.responsive-nav-icon,
.responsive-nav-close {
    cursor: pointer;
    display: none;
}

#overlay {
    background: 0 0 rgba(0, 0, 0, 0.8);
    display: none;
    height: 100%;
    position: fixed;
    top: 0; left: 0;
    -moz-transition: all 0.2s linear 0s;
    -webkit-transition: all 0.2s linear 0s;
    -ms-transition: all 0.2s linear 0s;
    transition: all 0.2s linear 0s;
    width: 100%;
    z-index: 90;
}

@media only screen and (max-width: 960px) {
	.responsive-nav-icon,
	.responsive-nav-close {
	    display: block;
	    position: absolute;
	    z-index: 1;
	}

	nav {
	    height: 100%;
	    padding: 20px;
	    position: fixed;
	    top: 0; left: -400px;
	    -moz-transition: all 0.2s linear 0s;
	    -webkit-transition: all 0.2s linear 0s;
	    -ms-transition: all 0.2s linear 0s;
	    transition: all 0.2s linear 0s;
	    width: 0;
	}

	nav.slide-in {
	    left: 0;
	    overflow-y: scroll;
	    width: 280px;
	    z-index: 100;
	}

	nav .menu-item {
		display: block;
	}
}

## css-jquery-responsive-mobile-navigation-menu.html
<!doctype html>
<html lang="en">
	<head>
		<link rel="stylesheet" href="css/style.css" />
	</head>
	<body>
		<header class="site-header" itemtype="http://schema.org/WPHeader" itemscope="itemscope" role="banner">
			<div class="wrap">
				<nav itemtype="http://schema.org/SiteNavigationElement" itemscope="itemscope" role="navigation">
					<ul class="menu">
						<li class="menu-item">
							<a href="#">Home</a>
						</li>
						<li class="menu-item">
							<a href="#">About</a>
						</li>
						<li class="menu-item">
							<a href="#">Blog</a>
						</li>
						<li class="menu-item">
							<a href="#">Login</a>
						</li>
					</ul>
				</nav>
			</div>
		</header>

		<main class="content" itemprop="mainContentOfPage" role="main">
		    ...
		</main>

		<footer class="site-footer" itemtype="http://schema.org/WPFooter" itemscope="itemscope" role="contentinfo">
		    ...
		</footer>

		<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
	</body>
</html>

## css-jquery-responsive-mobile-navigation-menu.js
$(function() {
	// Insert Responsive Navigation Icon, Close Icon, and Overlay
	// If you have access to your HTML, you should put this directly into your markup.
	$('<div class="responsive-nav-icon" />').appendTo('.row.one');
	$('<div class="responsive-nav-close" />').appendTo('nav');
	$('<div id="overlay" />').insertAfter('footer');

	// Navigation Slide In
	$('.responsive-nav-icon').click(function() {
		$('nav').addClass('slide-in');
		$('html').css("overflow", "hidden");
		$('#overlay').show();
		return false;
	});

	// Navigation Slide Out
	$('#overlay, .responsive-nav-close').click(function() {
		$('nav').removeClass('slide-in');
		$('html').css("overflow", "auto");
		$('#overlay').hide();
		return false;
	});
});