While searching the web for inspirational navigation ideas to share with my classes, I came across this example at 3point7designs. While it is labeled as an "advanced CSS navigation bar", the reality is that the tutorial uses images and a well-established technique (CSS Sprites) to provide an effect. Looking at it, I realized that the menu bar could be created entirely in CSS, with no images required:

From a UI perspective, the navigational construct is interesting: rather than highlighting the user's selection, it blurs out options that are not chosen, leaving the selection in focus. Implemented poorly, this would be the definition of "mystery meat" navigation, but the UI rescued by the fact that the entire navigation bar is in focus when the user's mouse is outside its immediate vicinity, allowing the user to clearly see all the navigational options.


First, let's establish the basic HTML, which is much the same as our previous examples:

<nav id="fuzzy-nav-example">
	<a href="#">Home
		<span>Start Here</span>
	<a href="#">About Us
		<span>Our Story</span>
	<a href="#">Graphic Design
		<span>Where We Started</span>
	<a href="#">Web Design
		<span>Our Passion</span>

Basic CSS

#fuzzy-nav-example { 
	background-color: #666;
	padding: 2rem .5rem;
	text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.3); 
	transition: .3s text-shadow linear;
	font-weight: 400;
	font-family: Avenir, Helvetica, sans-serif;
#fuzzy-nav-example a {
	color: #fff;
	text-decoration: none;
	font-size: 1.8rem; padding:.5em;
	border-bottom: none;
	position: relative;
#fuzzy-nav-example a:hover { 
	text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.3);
	opacity: 1;

The markup is complicated by the fact that there are sub-headings above each navigational element. The sub-headings require extra markup to be wrapped around them in order to be treated separately via CSS. Then we need to treat the text inside the <span> with CSS:

#fuzzy-nav-example a span { 
	font-size: 1rem;
	font-weight: 400;
	color: #999;
	display: block;
	text-transform: uppercase;
	position: absolute;
	top: 2rem; 
	left: 5rem;
	width: 10rem;
	line-height: 1.3;

The technique that allows the "reverse-focus" effect to work in the original 3point7design article is the same for this example. Traditionally, most developers think of :hover as a pseudo-class that can only be applied to <a> elements; in reality, :hover can be applied to any element at all.

First, we need to "blur out" all the text in the navigation bar when the user's mouse is anywhere near it:

#fuzzy-nav-example:hover a {
	text-shadow: 0 0 6px #fff;
	opacity: 0.8;

The selector for this declaration could be phrased as "when the mouse is over a <nav> element with a role of navigation, do what follows to the <li> elements inside it".

The declaration replaces the text-shadow on <li> content with a white shadow that is not displaced horizontally or vertically, but has a significant amount of blur. At the same time, the opacity of the <li> element is reduced by 20%.

Now we have to reverse the blur effect for the specific list item that the user's mouse happens to be over:

#fuzzy-nav-example a:hover {
	text-shadow: 2px 2px 2px rgba(0, 0, 0, 0.3);
	opacity: 1;

That's all you need: six condensed lines of CSS, that could probably reduced to five with a little work.

Enjoy this piece? I invite you to follow me at twitter.com/dudleystorey to learn more.
Check out the CodePen demo for this article at https://codepen.io/dudleystorey/pen/tIFpD