How To Code a Responsive Navigation

What this post is about

This post is about creating responsive navigation for any website using HTML, CSS and a bit of javaScript. In the end, there will only be 30 lines of jQuery to make it all work. Below there is a video that you can follow along and code while you are watching. The code blocks are available below so you can just cut & paste into your favourite editor.

Keep on Coding!

The Finished Code

File Structure

Just so you can follow along a bit easier this is the file structure I used

file structure for responsive navigation | HarrisWeb Creative

HTML Code

There isn’t much to say about this. It is a index.php and a nav.php, pretty standard.

index.php

<html>
<head>
	<title>Responsive Navigation</title>	
	<link rel="stylesheet" type="text/css" href="css/style.css">	
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
	<script src="js/navScript.js"></script>	
</head>
<body>
	<nav>
		<?php include 'nav.php' ; ?>
	</nav>
	<div class="spacer"></div>
		<h1>Responsive Navigation</h1>	
	<section>
	Lorem ipsum dolor sit amet, consectetur adipiscing elit,
	Just put a bunch of fake text in here
	</section>
</body>
</html>

nav.php

<ul>
	<li id="mobile-open"><button>MENU</button></li>
	<li><a href="index.php">Home</a></li>
	<li><a href="page1.php">Page 1</a>
		<ul>
			<li><a href="page1a.php">Page 1a</a></li>
		</ul>
	</li>
	<li><a href="#">Page 2</a></li>
	<li><a href="#">Page 3</a></li>
	<li><a href="#">Page 4</a></li>
	<li id="mobile-close"><button>Close Menu</button></li>
	
</ul>

CSS stylesheet

*{box-sizing:border-box}


body{margin:0; padding:0; font-family:'Arial',san-serif; font-size:1vw; color:#000000;} 


nav{position:fixed; background:linear-gradient(#000, #666);
    color:#fff; width:100%; margin:0; padding:0; z-index:+500;}

nav ul{list-style:none; text-align:center; margin:0; padding:0}
nav ul li{display:inline-block; padding:1.15vw 1vw; margin:0}
nav ul li a{color:#fff; text-decoration:none; padding:1em 2px; }
nav ul li:hover{background:#666}
#mobile-open, #mobile-close{display:none}
nav > ul > li.active{background:#000;}
nav ul li ul{position:absolute; top:4vw; }
nav ul li ul li{display:none; background:#333; border-bottom:solid 2px #ccc}
nav ul li ul li:hover{background:#999}

.spacer{height:5vw; width:100%}


section{width:33%; display:block; margin: 20px auto; }


@media only screen and (max-width:800px){
	body{font-size:16px; }
	nav ul li{margin:0; padding:15px 0; bottom-border:1px solid #ccc; width:100%}
	nav ul li{display:none}
	nav ul{background: #333}
	#mobile-open{display:block; }
	
}

jQuery Script

I probably didn’t need the $(document).ready() on each one of these scripts, just the first one.

$(document).ready(function(){
	var pgurl =window.location.href.substr(window.location.href.lastIndexOf("/")+1);
	
	$("nav ul li a").each(function(){
		if($(this).attr("href") == pgurl || $(this).attr("href") == ''){
			$(this).parent().addClass("active");
		}
	})
});

$(document).ready(function(){
	$("#mobile-open").click(function(){
		$("nav ul li").css("display","block");
	});
	$("#mobile-close").click(function(){
		$("#mobile-open").siblings().css("display","none")
	});
});

$(document).ready(function(){
  var x = (window.innerWidth);
	if(x > 800){
		$("nav ul li").hover(
			function(){
				$(this).find("ul li").css("display","block");
			},
			function(){
				$(this).find("ul li").css("display","none");
			}
		)
	}
});

That’s it folks, pretty simple. hope this helped you out.

Tutorial: Create Responsive Navigation from Scratch