Every year some of my web design students develop mockups with angled navigation, “because it’s different”. It takes some time for them to understand that the primary requirement for UI is to be as clear and coherent as possible.

That doesn’t mean that site navigation has to be staid or boring: plenty of opportunities remain in the standard horizontal navigational layout. Of late, I’ve been interested in creating navigational elements in angled frames, using pure CSS.

The HTML markup for this example is very simple. I visualized the navigation as being for the fictional company Quantum Foam, which specializes in fully immersive simulations of exotic locales:

<ul id="quantum-navigation">
	<li id="everest"><a href="#">Everest</a>
	<li id="mars"><a href="#">Mars</a>
	<li id="belize"><a href="#">Belize</a>
	<li id="monaco"><a href="#">Monaco</a>
</ul>

The CSS posed several interesting challenges. First, the list had to be angled via the skew transform, with the list items placed side-by-side:

ul#quantum-navigation {
	transform: skewX(-15deg);
	font-family: Agenda-Medium, Agenda, Arial Narrow, Arial, sans-serif;
	text-transform: uppercase; font-size: 1.5rem;
	line-height: 0;
	padding-left: 0;
}
ul#quantum-navigation li { 
	width: 12rem;
	box-shadow: 8px 0 3px rgba(0,0,0,0.2);
	position: relative;
	background-color: #ff0;
	background-size: 100% 120%;
	background-repeat: no-repeat;
	overflow: hidden;
}
ul#quantum-navigation li,
	ul#quantum-navigation li a { 
		display: inline-block;
		transition: .8s;
}

(Note that vendor prefixes have been removed for the sake of brevity and clarity).

Each <li> element is given a fixed width and a shadow to its right. Each element will have its own background image, so the shared properties and values are also declared here.

The elements overlap, but in reverse order: that is, the first link will overlap the second, the second over the third, and so on, which is opposite to the way a browser would arrange the elements under normal circumstances. Each list item is given relative positioning in order to achieve this.

The CSS transform will be inherited by the link text. To fix this, we have to skew the links in the opposite direction:

ul#quantum-navigation li a {
	transform: skewX(15deg);
	text-decoration: none;
	color: #fff;
	text-shadow: 2px 2px 2px rgba(0,0,0,0.4);
	letter-spacing: .25rem;
	width: 18rem;
	background: rgba(0,0,0,0.3);
	margin-left: -1rem;
	padding: 1rem 3rem;
}

Adding a shadow, increasing the letter kerning, and darkening the background clarifies the text. Note that the links are 50% wider than the <li> elements they are within, ensuring that they will always fill their container. The links are prevented from “slopping over” by using overflow: hidden on their parent elements.

The <li> elements are then given their unique background images and stacked. Some of the elements are drawn to the left for a better presentation:

#everest {
	z-index: 5;
	background-image: url(everest.jpg);
}
#mars { 
	z-index: 4;
	background-image: url(mars.jpg);
	left: -20px;
}
#belize {
	z-index: 3;
	background-image: url(belize.jpg);
	left: -40px;
}
#monaco {
	z-index: 2;
	background-image: url(monaco.jpg);
}

Two events occur when the user hovers over a list item: the links brighten (i.e. the dark background fades away), and the item moves to the right:

ul#quantum-navigation li:hover {
	transform: translateX(10px);
}
ul#quantum-navigation li:hover a {
	background: rgba(0,0,0,0);
}

The navigation is automatically responsive, in the sense that list items will drop to the left if there is not enough room to display the entire menu. But there are many other possibilities, which you are encouraged to explore.

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/enxmI