How To Use CSS Sliding Door Technique In WOrdpress Blog

Posted by

Hi,

WordPress functions wp_list_pages() and wp_list_categories() does not allow to embed span elements in your code. We can bypass it with some php regular expressions. For that copy this code where you want to appear your blog menu:

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

Once you modified your theme file, you have to use css to style it. You can use this sample code 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;
}

Thanks,

Shane G.

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.