Using CSS Sliding Doors in WordPress Navigaton

The problem. The built-in wp_list_pages() and wp_list_categories() functions allow lots of things, but they do not allow you to embed a <span> element so that you can use the well-known CSS sliding-doors technique. Happily, with some help from PHP and regular expressions, we can use this awesome technique on a WordPress blog.

1. Create the images you need, and then edit the style.css file in your WordPress theme. Here is an example:

   01	#nav a, #nav a:visited {

   02	display:block;

   03

   }

   04	#nav a:hover, #nav a:active {

   05	background:url(images/tab-right.jpg) no-repeat 100% 1px;

   06	float:left;

   07

   }

   08	#nav a span {

   09	float:left;

   10	display:block;

   11

   }

   12	#nav a:hover span {

   13	float:left;

   14	display:block;

   15	background: url(images/tab-left.jpg) no-repeat 0 1px;

   16

   }

2. Now it is time to edit the header.php file. Simply copy and paste one of the following codes, according to your needs:To list your pages:

   <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_pages('echo=0&orderby=name&exlude=181&title_li=&depth=1')); ?>
   </ul>

   To list your categories:

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

Code explanation. In this example, we make use of the echo=0 parameter in the wp_list_pages() and wp_list_categories() functions, which allows you to get the result of the function without directly printing it on the screen. Then, the result of the function is used by the PHP preg_replace() function and finally displayed with <span> tags added between the <li> and <a> tags.

Source:

• CSS Techniques: Using Sliding Doors with WordPress Navigation

1. Style Button with CSS Sliding Doors
2. Display a Random Header Image on Your WordPress Blog
3. 8 Useful WordPress SQL Hacks
4. Create A Vertical Sliding Panel Using jQuery And CSS3
5. 4 Simple Ways To Speed Up WordPress