anythinggraphic · November 22, 2016 23:58
diff --git a/css-jquery-responsive-mobile-navigation-menu.css b/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;
 	}
 }
diff --git a/css-jquery-responsive-mobile-navigation-menu.html b/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>
diff --git a/css-jquery-responsive-mobile-navigation-menu.js b/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;
 	});
 });