How to: Use the CSS Sliding doors technique within WordPress

I really like the well known CSS technique called “Sliding doors”. Unfortunely, WordPress functions as such as wp_list_pages() and wp_list_categories() don’t allow yo to embed span elements in your code. Here’s how to bypass it, with some php regular expressions.

To achieve this recipe, simply paste the following code where you want your menu to appear. The following code uses wp_lists_categories() but you can use wp_list_pages() instead if you'd like. The only thing you'll have to change is the function name.
If you want to see a live demo of this menu, just click here.

<ul id="nav">
<li><a href="<?php echo get_option('home'); ?>/"><span>Home</span></a></li>

<?php echo preg_replace('@\<li([^>]*)>\<a([^>]*)>(.*?)\<\/a>@i’, ‘<li$1><a$2><span>$3</span></a>’, wp_list_categories(’echo=0&orderby=name&exlude=181&title_li=&depth=1′)); ?>

</ul>

Of course, once you modified your theme file, you'll have to use some css to style it. You can use the code below in your style.css file:

#nav a, #nav a:visited {
    display:block;
}
#nav a:hover, #nav a:active {
    background:url(images/tab-right.jpg) no-repeat 100% 1px;
    float:left;
}
#nav a span {
    float:left;
    display:block;
}
#nav a:hover span {
    float:left;
    display:block;
    background: url(images/tab-left.jpg) no-repeat 0 1px;
}

This recipe was taken from an article I wrote some months ago at WpHacks.