Skip to Content

Responsive menus are pretty easy a lot of times, but I found myself “recreating the wheel” for each project for a while. I decided to provide an example of what I do here for posterity’s sake as well as to share with anyone who might find it useful.

The behavior for this menu is as follows: horizontal at desktop-like widths. Collapsed into a link for tablet and mobile-ish widths. The idea is that it is always easily accessible, but doesn’t take up too much screen real estate.

It uses mostly CSS with a tiny bit of JS.

← Resize the window to see the menu adjust. →

HTML

<!-- Just your basic nav with the addition of the menu link -->
<nav id="example">
	<a href="#mobile_nav" id="mobile_nav_link"><i class="icon-reorder"><!-- font awesome icon --></i> Menu</a>
	<ul class="nav_list">
		<li><a href="#">Home</a></li>
		<li><a href="#">About</a></li>
		<li><a href="#">Services</a></li>
		<li><a href="#">Pricing</a></li>
		<li><a href="#">Testimonials</a></li>
		<li><a href="#">Contact</a></li>
	</ul>
</nav>
<p>← Resize the window to see the menu adjust. →</p>

CSS

nav#example {
	background-color:#d44344;
	margin-bottom:2em
}
nav#example a {
	color:#fff;
	background-color:#d44344;
	text-decoration: none;
	display:inline-block;
	padding:0.5em 1em;
}
nav#example a:hover {
	background-color:#BA4641;
}
nav#example #mobile_nav_link {
	display:none;
}
ul.nav_list {
	margin:0;
	padding:0;
}
ul.nav_list li {
	margin:0;
	padding:0;
	list-style:none;
	display:inline;
}
ul.nav_list li a {
	
}

@media only screen and (max-width: 1024px) and (min-width: 481px) {
	/* Tablet navigation styles */
	nav#example #mobile_nav_link {
		display:inline-block;
	}
	nav#example {
		position: relative;
	}
	nav#example ul.nav_list {
		display:none;
	}
	nav#example ul.nav_list.on {
		display:block;
		position: absolute;
		top:2em;
		left:0;
	}
	nav#example ul.nav_list li a {
		display:block;
		min-width: 150px
	}
}

@media only screen and (max-width: 480px) {
	/* Mobile navigation styles */
	nav#example #mobile_nav_link {
		display:inline-block;
	}
	nav#example a {
		display:block;
	}
	nav#example ul.nav_list {
		display:none;
	}
	nav#example ul.nav_list.on {
		display:block;
	}
}

Javascript

$(function(){
	// add event handler
	$('#mobile_nav_link').click(function(){
		$(this).siblings('ul.nav_list').toggleClass('on');
		return false;
	});
});