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.
The Requirements
- SEO friendly
- Work with a WordPress CMS backend to be output dynamically using the wp_list_pages() function
- Have hover and current navigation states
- 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!