Using Sliding Doors With WordPress Navigation

Here is a version of the sliding doors technique that doesn’t require php expressions. Just use this code in place of your theme’s current page menu.

<ul class="navigation">
    	<li class="">Home

	<?php wp_list_pages('sort_column=menu_order&depth=1&title_li=&link_before=&link_after='); ?>
</ul>

All this does is give you the spans of “nav-left” and “nav-right” for you to use with your starting and ending images and code. The code above gives us the framework for the effect, but you’ll need to style it to fit your theme. Here is some CSS to get you started. This version of the technique uses a left, middle and right image with the middle image set to repeat.

#navigation a, #navigation a:visited {
    display:block;
}

.current_page_item {
	background-image: url(images/navigation-repeat.png);
	position: relative;
}

#navigation a:hover {
	background-image: url(images/navigation-repeat.png);
	position: relative;
}

.current_page_item .nav-right {
	position: absolute;
	display: block;
	right: 0;
	background: url(images/navigation-hover-right.png) right;
}

.current_page_item .nav-left {
	position: absolute;
	display: block;
	left: 0;
	background-image: url(images/navigation-hover-left.png);
}

#navigation a:hover .nav-right {
	position: absolute;
	display: block;
	right: 0;
	background: url(images/navigation-hover-right.png) right;
}

#navigation a:hover .nav-left {
	position: absolute;
	display: block;
	left: 0;
	background-image: url(images/navigation-hover-left.png);
}

That’s it. You’ll want to use your own images and tweak the css to fit your theme, but now you can have some great navigation effects that will work in all browsers. I recently used this technique on a redesign of a2 Church that we have been developing. I could have created individual buttons, but this is so much more flexible, plus if we ever want to make a change, it will be a piece of cake.