Boston Globe responsive css navigation menu tutorial

Responsive CSS

With all the talk about responsive CSS, it’s exciting to see a prominent website like the Boston Globe using this approach on their website. Rather than create alternate page layouts/stylesheets, the Boston Globe has gone with a adaptive approach. Just for fun, visit http://bostonglobe.com and resize the window. You will see the layout changing as the window size changes. This is what’s knowing as responsive web design. Especially of interest to me was the way the Boston Globe menu changed with the width of the screen.

Reasoning

I wanted to do this for a client site of mine, they have a lot of links and needed a creative way to display them on a mobile browser.

Example

Try resizing your browser window to see the menu in action. I’m also using the jQuery toggle function on the “sections” menu item to show and hide the secondary menu.

The HTML

<nav id="sm-access">
<div class="faux-menu">
<h1 class="sections-heading nav">
<a href="#" id="slick-toggle">Sections</a>

</h1>
			
<h2 class="home-menu-item nav"><ahref="#">About</a></h2>

<h2 class="connect-menu-item nav"><ahref="#">Connect</a></h2>
			
<div id="slickmenu">

<ul>
<li><a href="">Section 1</a></li>
<li><a href="">Section 2</a></li>
<li><a href="">Section 3</a></li>
<li><a href="">Section 4</a></li>
<li><a href="">Section 5</a></li>
</ul>

</div>

</div>

</nav>

The CSS

#sm-access {
	width:100%;
	float:left;
	padding:0;
	margin:0;
}

#sm-access *, #sm-access h1, #sm-access h2 {
	font-size: 14px;
	color:black;
	text-decoration:none;
	font-weight:100;
    font-family:arial;
}

#sm-access a {
	padding:5px;
	display:block;
}

#sm-access .faux-menu {
	border-left:1px solid #ccc;
	float:left;
	height:inherit;
        width:100%;
}

	#sm-access .nav {
		float:left;
		margin:0;
		border-right:1px solid #ccc;
		border-top:1px solid #ccc;
		border-bottom:1px solid #ccc;
	}
	
	#sm-access #slickmenu {
		margin:0;
		padding:0;
		width:100%;
		display:block;
		float:left;
		clear:both;
	}
	#sm-access #slickmenu ul {
		position:relative;
		margin:0;
		width:inherit;
		float:left;
		padding:0;	
		border-top:1px solid #ccc;
		border-left:1px solid #ccc;		
	}
	#sm-access #slickmenu ul li {
		float:left;
		list-style:none;
		margin:0;
		padding:0;
		border-right:1px solid #ccc;
		border-top:1px solid #ccc;
		margin-left:-1px;
		border-bottom:1px solid #ccc;
	}
	
		@media screen and (max-width: 520px) { /* extra small screen */
			#sm-access #slickmenu {
				margin-top:-1px;
				border-bottom:0;
			}
			#sm-access #slickmenu ul {
				border-top:0;
				border-bottom:1px solid #ccc;
			}
			
			#sm-access #slickmenu ul li {
				float:left;
				width:100%;
				border-bottom:0;
			}
			
		}
	
		@media screen and (min-width: 520px) and (max-width: 700px){ /* small screen */
			#sm-access #slickmenu {
				margin-top:-1px;
				border-bottom:0;				
			}
			
			#sm-access #slickmenu ul li {
				float:left;
				width:50%;
				border-top:0;
			}
			
		}
	
		@media screen and (min-width: 700px) { /*this is for LARGE screen*/
			#sm-access .sections-heading {
				display:none;
			}
			#sm-access #slickmenu {
				display:block!important;
				clear:none;
				float:left;
				width:auto;
			}
			#sm-access #slickmenu ul {
					border-top:0;
					border-left:0;
			}
				
		}

#sm-access ul li ul {
	display:none;
}

Conclusion

This is a great way to handle responsive navigation menus in CSS. This menu shows nicely on a large screen and a mobile screen. This is the slickest implementation I’ve sen so far.