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.

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

<ul id="subnav" class="clearfix">   <li class="page_item page-item-259"><a href="https://www.cogenra.com/products-services/hppa/" title="HPPA">HPPA</a></li>
    <li class="page_item page-item-261"><a href="https://www.cogenra.com/products-services/system-purchase/" title="System Purchase">System Purchase</a></li>
    <li class="page_item page-item-75"><a href="https://www.cogenra.com/products-services/installation/" title="Installation">Installation</a></li>
    <li class="page_item page-item-81 current_page_item"><a href="https://www.cogenra.com/products-services/incentives/" title="Incentives">Incentives</a></li>
</ul>

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);

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