The Impossible Slanted, Diagonal, Navigation Setup with CSS, jQuery &  XHTML

Recently I needed to develop a diagonal menu, which at first glimpse seemed completely do-able. Once I dug deeper into it, I realized that it was actually quite difficult to build. Impatient? Jump straight to the demo / sample source code.

diagonal css navigation menu

The Requirements

  1. SEO friendly
  2. Work with a WordPress CMS backend to be output dynamically using the wp_list_pages() function
  3. Have hover and current navigation states
  4. Match the designer exactly

The XHTML

The CSS

#subnav {
	list-style:none;
	padding:0;
	margin:1.6em 0;
}
#subnav li {
	list-style:none;
	margin:0;
	padding:0;
	float:left;
}
#subnav li a {
	font-size:14px;
	margin:0;
	text-decoration:none;
	display:block;
	color:#424a53;
	letter-spacing:0.01em;
	padding:3px 18px 4px 3px;
	line-height:1.2em;
	background:#e0e1e3 url(subnav-bg.gif) top right no-repeat;
}
#subnav li.previous-current a {
	background-image:url(subnav-bg-left.gif);
	background-position:top right
	background-repeat:no-repeat;
}
#subnav li.previous-current a:hover {
	background-image:url(subnav-bg-double.png);
	background-position:top right
	background-repeat:no-repeat;
}
#subnav li.first a {
	padding-left:10px;
}
#subnav li.last a {
	background-image:url(subnav-bg-farright.png);
	background-position:top right
	background-repeat:no-repeat;
}
#subnav li a:hover,
#subnav li.current_page_item a,
body.pageid-91 #subnav li.page-item-178 a,
#subnav li.last:hover a {
	color:#fff;
	background:#FE9914 url(subnav-bg-right.gif) top right no-repeat;
}
#subnav li.last a:hover,
#subnav li.current_page_item.last a,
body.pageid-91 #subnav li.page-item-178.last a,
#subnav li.last:hover a {
	color:#fff;
	background:#FE9914 url(subnav-bg-farright.png) top right no-repeat;
}
#subnav li.current_page_item.previous-current a {
	background-image:url(subnav-bg-double.png);
	background-position:top right
	background-repeat:no-repeat;
}
#subnav li span {
	color:#FE9914;
	margin:0 6px 0 9px;
}

JavaScript/jQuery

(function($){ 
	// Preload method for jQuery
	var cache = [];
	// Arguments are image paths relative to the current page.
	$.preLoadImages = function() {
		var args_len = arguments.length;
		for (var i = args_len; i--;) {
			var cacheImage = document.createElement('img');
			cacheImage.src = arguments[i];
			cache.push(cacheImage);
		}
	}
	$(function(){
		// Subnav jQuery
		if ($('#subnav').length > 0){
			jQuery.preLoadImages('subnav-bg-farright.png', 'subnav-bg-double.png', 'subnav-bg-left.gif', 'subnav-bg-right.gif', 'subnav-bg.gif');
			// First and last classes
			$('#subnav li:first').addClass('first');
			$('#subnav li:last').addClass('last');
			$('#subnav li a').mouseover(function(){
				$(this).parent().prev().addClass('previous-current');
				$(this).parent().next().addClass('next-current');
			});
			$('#subnav li a').mouseout(function(){
				$(this).parent().prev().removeClass('previous-current');
				$(this).parent().next().removeClass('next-current');
				$('#subnav li.current_page_item').prev().addClass('previous-current');
				$('#subnav li.current_page_item').next().addClass('next-current');
			});
			$('#subnav li.current_page_item').prev().addClass('previous-current');
			$('#subnav li.current_page_item').next().addClass('next-current');
		}
	});
})(jQuery);

See the sample / demo!

If you have any suggestions or questions, as always fire away!

Meet the Author

Kevin Leary, WordPress Consultant

I'm a freelance web developer and WordPress consultant in Boston, MA with 17 years of experience building websites and applications. View a portfolio of my work or request an estimate for your next project.